如何在 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;

但是播放文件没有成功

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

编辑：我的

.wav

文件被命名为

1.wav

到

70.wav

，如果有帮助的话。

谢谢。

Answer 1

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

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;

希望对您有所帮助。

Answer 2

我有同样的问题，最后我安装了一个包。

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

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