如何在 reactjs 应用程序的后台播放 mp3 url？

【问题标题】：How to play mp3 url in the background in reactjs app?如何在 reactjs 应用程序的后台播放 mp3 url？
【发布时间】：2022-11-28 02:38:33
【问题描述】：

你如何将 mp3 url 添加到你的 reactjs 应用程序并让它在后台循环自动播放？

我安装了 reactplayer 和 react 音频播放器包。

这是我的代码：

import "./App.css";
import ReactAudioPlayer from "react-audio-player";

function App() {
  return (
    <div className="App">
      <ReactAudioPlayer
        src="https://www.mboxdrive.com/SolarSymphony.mp3"
        autoPlay
        loop
      />
    </div>
);
}

export default App;

【问题讨论】：

不知道 ReactAudioPlayer 是什么，但是您可以为此使用普通的音频元素。
这是一个安装的 npm 包：npmjs.com/package/react-audio-player 我尝试了不同的方法，但运气不错。我什至将音频添加到要运行的 mp4 视频中，但没有用。

标签： reactjs mp3 audio-streaming autoplay-media-studio

【解决方案1】：

你可以载入 mp3文件来自音频元素.

确保将music.mp3 移至/public 文件夹。
在index.html 的<body> 中添加一个audio 元素
```
<audio id="audio" loop autoplay> 
  <source src="%PUBLIC_URL%/music.mp3" type="audio/mpeg">
</audio>
```
完毕！

如果你想控制音频到Play/Pause/Stop音乐。
```
const audio: Partial<HTMLAudioElement> = document.getElementById('audio')

audio.pause()
```
您可以从任何地方调用它，如果您不希望它在应用程序启动时播放，请记住从音频元素中删除 autoplay 属性。

【讨论】：