如何在反应中动态导入声音文件？

Question

  const [soundFile, setSoundFile] = useState(null);

  useEffect(() => {
    async function importFile() {
      const file = await import(
        `../../assets/media/${teamimType}/humash/${teamimType}-parasha.wav`
      );
      setSoundFile(file);
    }
    importFile();
  }, []);

导入工作没有错误，但是当我在声音组件中使用它时 -

<AudioPlayer
   className="audio-player"
   style={{ direction: 'ltr' }}
   showJumpControls={false}
   autoPlay
   src={soundFile}  // <=====
/>

我收到以下错误： 未捕获（承诺）TypeError：无法将对象转换为原始值...

导入后，如果我记录 file，我会得到

可能导入方法不对，但我不知道该怎么办..谢谢！

Answer 1

您最好使用 url 而不是导入并在 AudioPlayer 中使用它。

useEffect(() => {
         setSoundFile(`../../assets/media/${teamimType}/humash/${teamimType}-parasha.wav`)
    }
)
...
<AudioPlayer
   className="audio-player"
   style={{ direction: 'ltr' }}
   showJumpControls={false}
   autoPlay
   src={soundFile}
/>

在AudioPlayer组件中，可以异步读取文件并进行处理。

希望对您有所帮助。

Answer 2

我明白了！

1. 只需使用 require 而不是 import =>

  useEffect(() => {
    const file = require(`../../assets/media/${teamimType}/humash/${teamimType}-parasha.wav`);
    setSoundFile(file);
  }, []);

2. 或留在 import() 但传递给音频组件 file.default （看问题中的图片）=>

useEffect(() => {
    async function importFile() {
      const file = await import(
        `../../assets/media/${teamimType}/humash/${teamimType}-parasha.wav`
      );
      setSoundFile(file.default); // <==========
    }
    importFile();
  }, []);

如何在反应中动态导入声音文件？

How to dynamically import sound files in react?

javascript

event-handling

reactjs