如何在reactjs应用程序的后台播放mp3网址?

ohtdti5x  于 2022-11-29  发布在  React
关注(0)|答案(1)|浏览(159)

如何在reactjs应用中添加一个mp3网址,并让它在后台循环自动播放?
我安装了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;
uxhixvfz

uxhixvfz1#

您可以从音频元素加载MP3文件
1.确保将您的music.mp3移动到/public文件夹中。

1.在index.html

<audio id="audio" loop autoplay> 
  <source src="%PUBLIC_URL%/music.mp3" type="audio/mpeg">
</audio>

<body>中添加一个audio元素
"搞定"
如果要控制音频以Play/Pause/Stop播放音乐。

const audio: Partial<HTMLAudioElement> = document.getElementById('audio')

audio.pause()

你可以在任何地方调用它,如果你不想在应用启动时播放它,记得从audio元素中移除autoplay prop。

相关问题