React.js播放音乐问题

时间:2020-03-22 05:58:32

标签: javascript reactjs audio

playSong = (music) => {
  this.setState({
song: music
  }, () => this.addMusicToPlayer())
}

addMusicToPlayer = () => {
  let audio = document.getElementById("playing_id"); 
  let playing = this.state.playing
  if(!playing){
audio.play(); 
this.setState({
playing: true
})
  } else {
this.setState({
playing: false
})
audio.pause(); 
  }
}



<button className="jp-play" tabIndex={0}><i className={playing ? "fa fa-pause" : "fa fa-play" } onClick={() => this.handlePlayer(this.state.song ? "playing_id" : "audio")} />
{
  this.state.song ? 
  (
    <audio id="playing_id">
<source src={"http://127.0.0.1:5000/"+ this.state.song} type="audio/mp3" />
    </audio>
  ):(
    <audio id="audio" style={{ display:'none' }}>
<source src="static/media/audio/beach.mp3" type="audio/mp3" />
    </audio>
  )
}
</button>

我在这里尝试在React.js中播放音乐。 歌曲来自数据库,我正在使用onClick event.id

更改按钮播放触发器上的歌曲

当我对src="static/media/audio/beach.mp3"之类的歌曲进行硬编码时,正在播放,但是来自数据库的歌曲却没有播放。

请看看。

我在哪里犯错

0 个答案:

没有答案