استخدام audio في ال react js

السلام عليكم لدي حل ممتاز لك.

لتشغيل الموسيقى بدون import ،يمكنك استخدام طريقة useState.

الخطوات:

•  قم بإنشاء متغير state جديد في App.js الخاص بك لربط مسار الموسيقى بالمشغل.

const [musicPath, setMusicPath] = useState("");

• ثاني شيء قم بإنشاء دالة لتحميل مسار الموسيقى من الملف.

const loadMusicPath = () => {
  const musicFiles = fs.readdirSync("./src/music");
  setMusicPath(musicFiles[Math.floor(Math.random() * musicFiles.length)]);
};

• بعد ذلك، قم بتشغيل دالة loadMusicPath عند تحميل الصفحة.

useEffect(() => {
  loadMusicPath();
}, []);

• أخيرًا، قم بتعيين مسار الموسيقى إلى مشغل الموسيقى عند الضغط على اسم الموسيقى في القائمة.

const handleClick = (musicName) => {
  setMusicPath(`./src/music/${musicName}`);
};

الكود بالكامل :

import React, { useState, useEffect } from "react";
import { Audio } from "react-native";
import fs from "fs";

const App = () => {
  const [musicPath, setMusicPath] = useState("");

  const loadMusicPath = () => {
    const musicFiles = fs.readdirSync("./src/music");
    setMusicPath(musicFiles[Math.floor(Math.random() * musicFiles.length)]);
  };

  useEffect(() => {
    loadMusicPath();
  }, []);

  const handleClick = (musicName) => {
    setMusicPath(`./src/music/${musicName}`);
  };

  return (
    <div>
      <ul>
        {musicFiles.map((musicName) => (
          <li key={musicName} onClick={() => handleClick(musicName)}>
            {musicName}
          </li>
        ))}
      </ul>
      <Audio
        source={{ uri: musicPath }}
        controls
        onEnd={() => loadMusicPath()}
      />
    </div>
  );
};

export default App;