如何从 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

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

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

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

Answer 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;

希望对您有所帮助。

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

How to import and play all audio files from a directory in React?

reactjs

file

import

html5-audio