從數據庫連續流式傳輸隨機音頻

Question

我正在為一個非常簡單的音頻流媒體計划一個項目，該項目將采用我的本地服務器上托管的 mysql 歌曲數據庫列表，然后全天不斷地從列表中隨機播放一首歌曲。 這將附加到一個非常簡單的前端頁面，該頁面將顯示當前播放的歌曲的名稱。

我知道如何從數據庫中獲取一個隨機文件並使用 Javascript/HTML 前端流式傳輸它，但是我對如何檢測歌曲何時結束感到迷茫 - 然后加載下一首歌曲。 有沒有一種簡單的方法可以做到這一點？ 有人可以指出我正確的方向嗎？

編輯：為了詳細說明前端，我很可能會通過 PHP 將文件名/位置提供到 HTML5 音頻標簽中（我再次希望這盡可能簡單）。 我認為最簡單的方法是播放音頻文件，然后刷新頁面並使用相同的音頻標簽和新文件名播放下一個文件 - 我只是不知道如何在結束時導致該事件發生這首歌。 或者，如果需要，我可以使用基於 Javascript 的播放器，如 JPlayer (http://www.jplayer.org/)。

我猜有某種回調函數可以與 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>