如何在使用新音频时构建组件

时间:2016-09-28 19:36:28

标签: javascript reactjs

我是React的新手,所以在React中思考。

当用户点击React中的按钮时,我想播放音频片段。我想知道设置component的最佳方法,以便我在组件的正确方法中获得音频。

在我的'app'中有3首歌曲,但我只想创建一个Audio对象的实例。

在jQuery中我会做这样的事情:

var songs = ['1.mp3', '2.mp3', '3.mp3'];
var i = 0;
var audio = new Audio();

$('.play').click(function(){
   audio.src = songs[i];
   audio.play();
});

$('.next').click(function(){
   i++;
   audio.src = songs[i];
   audio.play();
});

目前我的反应代码如下所示。也许我错误地使用componentDidMount?我需要在某个地方设置state吗?或者它需要是prop

var Player = React.createClass({

   componentDidMount: function() {
      var audio = new Audio();
      audio.src = "test.mp3"
   },

   playSong: function() {  
     console.log(audio)
     audio.play();
   },

   render: function(){
     return(
       <div className="footer">
         <i onClick={this.playSong} className="play"></i>
         <i className="pause"></i>
         <i className="next-song"></i>
       </div>
     )
   }
 });

1 个答案:

答案 0 :(得分:0)

你可以拥有audioSources的道具并且拥有一个mp3文件名数组。然后,您的播放器组件上的状态为activeAudioIndex,并且在第一次加载时会执行以下操作:

// set audio as a property of component `this.audio` can be accessed anywhere in component
audio: new Audio(), 

getInitialState: function() { 
  return {
   activeAudioIndex: 0
  }
},

componentDidMount: function() {
  this.audio.src = this.props.audioSources[this.state.activeAudioIndex]
}

nextSong: function() {
  var nextSongIndex = this.state.activeAudioIndex + 1 
  this.audio.src = this.props.audioSources[nextSongIndex]
  this.setState({activeAudioIndex: nextSongIndex})
}

playSong: function() {
  this.audio.play()
}

然后当你实际使用这个组件时可以做

<Player audioSources={['1.mp3', '2.mp3', '3.mp3']} />