我正在创建一个简单的反应应用,需要播放带有给定网址的音乐。
我尝试使用硬编码音乐网址进行测试,并使用<audio>
标记播放音乐,就像我们在HTML中一样。
class Music extends React.Component {
render() {
return (
<span>
<audio src="URL">
</span>
)
}
}
但这不会编译。在反应应用中播放音乐的最简单方法是什么?
答案 0 :(得分:4)
一个解决方案是使用HTML5 Audio
。创建new Audio
对象并使用自定义Play
/ Pause
按钮对其进行控制。
基本示例:
class Music extends React.Component {
constructor(props) {
super(props);
this.state = {
play: false,
pause: true,
}
this.url = "http://streaming.tdiradio.com:8000/house.mp3";
this.audio = new Audio(this.url);
}
play = () => {
this.setState({ play: true, pause: false })
this.audio.play();
}
pause = () => {
this.setState({ play: false, pause: true })
this.audio.pause();
}
render() {
return (
<div>
<button onClick={this.play}>Play</button>
<button onClick={this.pause}>Pause</button>
</div>
);
}
}
ReactDOM.render(
<Music />,
document.getElementById('container')
);
&#13;
<div id="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
&#13;
此外,您可以使用addEventListener
来控制和处理Play
/ Pause
。
播放强>
this.audio.addEventListener('play', () => {
this.setState({
play: true,
pause: false,
})
});
暂停:强>
this.audio.addEventListener('pause', () => {
this.setState({
play: false,
pause: true,
})
});
文档和示例:
重要提示:
HTML5 Audio
元素没有stop()
函数,因此暂停()后的音频仍在加载(在后台缓冲)。
这是一个解决方案: HTML5 Video: Force abort of buffering
<强>的jsfiddle:强> https://jsfiddle.net/y2j0vzbe/
希望这可以提供帮助。