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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

class Music extends React.Component { 
    render() { 
    return (
     <span> 
     <audio src="URL"> 
    </span> 
    ) 
    } 
}

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

回答：

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

希望这可以帮助。

以上是 有没有办法与&lt;audio&gt;一起播放音乐？ 的全部内容， 来源链接： utcz.com/qa/260053.html

回到顶部