如何从 React 中的目录导入和播放所有音频文件？

Question

我正在尝试使用 React 播放位于目录内的每个音频文件。 我可以按如下方式播放一个文件，但我不想导入每个文件，因为文件夹中有 70 个文件：

import {useEffect} from 'react';
import audio1 from '../../Storage/Audio/1.wav';

const Mp3player = () =>  {
  const audioEl = new Audio(audio1);

  const handlePlay = () =>{
    audioEl.play();
  }
 
  useEffect(() => {
    audioEl.load();
  }, []);

    return (
      <div>
        <h1>Player </h1>
        <button onClick={handlePlay}> Play </button>
      </div>
    );
  }
export default Mp3player;

我试过这个：

import {useEffect} from 'react';

const r = require.context('../../Storage/Audio', false, /\.(wav)$/);

let audios  = [];
r.keys().forEach((item) => {audios.push('file:../../Storage/Audio/' + String(item).substring(2))});
console.log(audios)

const Mp3player = () =>  {
  const audioEl = new Audio(audios[0]);
  console.log(audios[0]);

  const handlePlay = () =>{
    audioEl.play();
    console.log("playing");

  }
    useEffect(() => {
    audioEl.load();
  }, []);

    return (
      <div>
        <h1>Player </h1>
        <button onClick={handlePlay}> Play </button>
      </div>
    );
  }
export default Mp3player;

但是播放文件没有成功。

如何导入和播放所有音频文件并将它们放入数组或 object 中？

编辑：如果有帮助，我的.wav文件被命名为1.wav到70.wav 。

谢谢你。

Answer 1

我遇到了同样的问题，最后我安装了一个软件包。

https://www.npmjs.com/package/react-audio-player

是开源的，要么检查代码要么在你的项目中使用它......这可以帮助你

Answer 2

所以这就是我设法解决它的方式：

1. 我的视频在public中。 出于本示例的目的，它们被命名为： video1.mp4和video2.mp4 。

2. 我使用react-player库。

这是结果代码：

import ReactPlayer from "react-player";

function App() {
  const videoNames = [];

  for (let i = 1; i < 3; i++) {
    videoNames.push(`video${i}.mp4`);
  }

  const Videos = () => {
    return (
      <div>
        {videoNames.map((videoName) => {
          return (
            <div>
              <h1>{videoName}</h1>
              <ReactPlayer url={videoName} controls={true} />;
            </div>
          );
        })}
      </div>
    );
  };

  return <Videos />;
}

export default App;

我希望它有所帮助。