使用 react js 播放本地 mp3 文件而不导入

Question

我想使用 react.js 创建一个显示我选择的不同歌曲的应用 问题是它不适用于本地文件。路径没问题（刚刚在 DOM 中检查） 相对路径和绝对路径都试过了，还是一样。

我尝试了很多东西，比如导入react-sound、react-audio-player...

我尝试在文件开头使用“import song from”./songs/song.mp3直接导入mp3文件，它可以工作，但它没有用，因为你必须手动添加它，如果你想要添加/删除歌曲。

当我按下播放按钮时，它总是会失败并返回错误：

DOMException: 加载失败，因为找不到支持的源。

import React from "react";

const SongCard = (props) => {

const playAudio = () => {
  const audio = new Audio(props.song.path)
  const audioPromise = audio.play()
  if (audioPromise !== undefined) {
    audioPromise
      .then(() => {
        // autoplay started
        console.log("works")
      })
      .catch((err) => {
        // catch dom exception
        console.info(err)
      })
  }
}

  return (
    <div className="songCard">
      <div className="coverContainer">
        <img src=""/>
      </div>
      <div className="infoContainer">
        <div className="playPauseButton" onClick={playAudio}>►</div>
        <div className="songTitle">{props.song.nom}</div>
      </div>
    </div>
  );
};

export default SongCard;

有人有想法吗？

Answer 1

由于安全问题，您将无法通过在浏览器中运行的 JavaScript 以编程方式访问本地文件。

获取本地文件的唯一方法是：

1. 用户通过文件<input>选择文件
2. 用户将文件拖放到您的应用程序中

通过这种方式，用户明确授予您访问这些文件的权限。

您可以围绕这些交互设计您的应用程序，或者

您可以在本地启动一个网络服务器，它可以访问您的音频文件并将这些文件流式传输到您的应用程序或将文件上传到云服务。

Answer 2

您可以使用以下代码来做到这一点：

const SongCard = (props) => {
const playAudio = () => {
    let path = require("./" + props.song.path).default;
    const audio = new Audio(path);
    const audioPromise = audio.play();
    if (audioPromise !== undefined) {
        audioPromise
            .then(() => {
                // autoplay started
                console.log("works");
            })
            .catch((err) => {
                // catch dom exception
                console.info(err);
            });
    }
};

return (
    <div className="songCard">
        <div className="coverContainer">
            <img src="" />
        </div>
        <div className="infoContainer">
            <div className="playPauseButton" onClick={playAudio}>
                ►
            </div>
            <div className="songTitle">{props.song.nom}</div>
        </div>
    </div>
);
};

export default SongCard;

如果你把require中的"./"改成音频字典的相对路径，并且只发送父props中的音频文件名就可以了

希望对你有帮助

Answer 3

您是否尝试过使用<audio /> 标签？

这是一个 React 工作音频示例。

class App extends React.Component {
  render() {
    return (
     <div>
         <audio ref="audio_tag" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" controls autoPlay/>

     </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById("app")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

在此处查找有关<audio /> 标签的更多信息：https://www.w3schools.com/html/html5_audio.asp