有没有办法用<audio>播放音乐?

时间:2017-12-03 08:25:38

标签: javascript reactjs audio

我正在创建一个简单的反应应用,需要播放带有给定网址的音乐。 我尝试使用硬编码音乐网址进行测试,并使用<audio>标记播放音乐,就像我们在HTML中一样。

class Music extends React.Component {
  render() {

    return (
      <span>

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

    )
  }
}

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

1 个答案:

答案 0 :(得分:4)

一个解决方案是使用HTML5 Audio。创建new Audio对象并使用自定义Play / Pause按钮对其进行控制。

基本示例:

&#13;
&#13;
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;
&#13;
&#13;

此外,您可以使用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/

希望这可以提供帮助。