我是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>
)
}
});
答案 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']} />