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

IT技术 javascript reactjs audio
2021-05-22 17:11:57

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

我尝试了很多东西，例如导入react声音，react音频播放器......

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

当我按下播放按钮时，它总是无法兑现Promise并向我返回错误：

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;

有没有人有想法？

3个回答

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

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

  1. 用户通过文件选择文件 <input>
  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中的音频文件的名称，它将起作用

我希望我能帮助你

你试过使用<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

其它你可能感兴趣的问题
上一篇无法在 React 功能组件中将 onclick 添加到 svg 路径 下一篇在 React 中使用 getElementByID