有没有办法与一起播放音乐？

Question

我正在创建一个简单的反应应用程序，需要使用给定的URL播放音乐。 我试图用硬编码的音乐网址进行测试，并使用<audio>标签来播放音乐，就像我们在HTML中一样。有没有办法与<audio>一起播放音乐？

class Music extends React.Component { 
    render() { 

    return (
     <span> 

     <audio src="URL"> 
    </span> 

    ) 
    } 
} 

但是这不会编译。在反应应用程序中播放音乐的最简单方法是什么？

Answer 1

其中一种解决方案可以使用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') 
 
);

<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>

您也可以使用addEventListener控制和处理Play/Pause。

播放：

this.audio.addEventListener('play',() => { 
    this.setState({ 
    play: true, 
    pause: false, 
    }) 
}); 

暂停：

this.audio.addEventListener('pause',() => { 
    this.setState({ 
    play: false, 
    pause: true, 
    }) 
}); 

文档和示例：

Audio/Video Event Listener

MDN HTML5 Audio

重要提示：

的HTML5 Audio元素没有一个stop()功能，所以暂停后音频（）仍在加载（缓冲背景）。

这是一个解决方案： HTML5 Video: Force abort of buffering

的jsfiddle： https://jsfiddle.net/y2j0vzbe/

希望这可以帮助。