Question

我正在计划一个非常简单的音频流媒体项目，该项目将采用我本地服务器上托管的歌曲的mysql数据库列表，然后在一天中不断地从列表中随机流式传输一首歌曲。这将附加到一个非常简单的前端页面，该页面将显示当前正在播放的歌曲的名称。

我知道如何从数据库中获取一个随机文件并使用Javascript / HTML前端对其进行流式传输，但是我对如何检测歌曲何时结束感到迷茫 - 然后加载下一首歌曲。有一个简单的方法吗？有人能指出我正确的方向吗？

编辑：为了详细说明前端，我很可能通过PHP将文件名/位置提供到HTML5音频标签中（我希望这一点尽可能简单）。我认为最简单的方法是播放音频文件然后刷新页面并使用相同的音频标签和新文件名播放下一个文件 - 我只是不知道如何导致该事件发生在最后这首歌曲。或者，如果需要，我可以使用像JPlayer（http://www.jplayer.org/）这样的基于Javascript的播放器。

我猜我有一种可以和JQuery一起使用的回调函数吗？

Answer 1

HTML5音频标签有一个“onended”事件，它在媒体到达时运行，但由于你想继续播放，你应该使用“onwaiting”事件，当媒体到达终点时它也会触发，但保持本身已准备好接受新的曲目/数据。

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

<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>

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

1 个答案: