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

【问题标题】：How to import and play all audio files from a directory in React?如何从 React 的目录中导入和播放所有音频文件？
【发布时间】：2022-05-11 17:14:19
【问题描述】：

我正在尝试使用 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，如果有帮助的话。

谢谢。

【问题讨论】：

标签： reactjs file import html5-audio

【解决方案1】：

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

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

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

【讨论】：

您能否详细说明您的答案，以便我接受？例如，给出一个从文件夹中导入所有文件的示例代码。谢谢。

【解决方案2】：

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

我的视频位于public 文件夹中。在本示例中，它们被命名为：video1.mp4 和 video2.mp4。
我使用了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;

希望对你有帮助。

【讨论】：