且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

从数据库连续流式传输随机音频

更新时间:2022-01-14 23:56:13

HTML5音频标签具有事件"onended",该事件在媒体播放结束时运行,但是由于您希望继续播放,因此应使用"onwaiting"事件,当媒体到达末尾时也会触发该事件,但会随时准备接受新的曲目/数据.

HTML5 audio tag has an event "onended" which is run when the media reaches its end, but since you wish to keep playing you should use the "onwaiting" event, which also fires when the media reaches its end, but keeps itself ready to accept a new track/data.

然后,您可以使用XMLHttpRequest对象查询要播放的下一首曲目,例如.

You can then use the XMLHttpRequest object to query for the next track to play, eg.

<script type="text/javascript">
  function getNextTrack(e) {
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", "next_track.php", false);
    xhttp.send("");

    var playback = xhttp.responseXML.childNodes[0];
    for(i = 0; i < playback.childNodes.length; ++i) {
      if (playback.childNodes[i].nodeName != 'track') continue;
      var value = playback.childNodes[i].childNodes[0].nodeValue;
      e.currentTarget.src = value;
      break;
    }
  }
</script>
<audio id="player" onwaiting="javascript: getNextTrack(e)" src="first_track.ogg"></audio>

xml的格式为:

<?xml version="1.0" encoding="UTF-8" ?> 
<playback> 
    <track>next_song.ogg</track>
</playback>