我正在计划一个非常简单的音频流媒体项目,它将获取本地服务器上托管的 mysql 数据库歌曲列表,然后全天不断地从列表中随机播放一首歌曲。这将附加到一个非常简单的前端页面,该页面将显示当前播放歌曲的名称。
我知道如何从数据库获取随机文件并使用 Javascript/HTML 前端对其进行流式传输,但我不知道如何检测歌曲何时结束 - 然后加载下一首歌曲。有没有一种简单的方法可以做到这一点?有人能指出我正确的方向吗?
EDIT:为了详细说明前端,我很可能会通过 PHP 将文件名/位置提供到 HTML5 音频标签中(我再次希望这尽可能简单)。我认为最简单的方法是播放音频文件,然后刷新页面并使用相同的音频标签和新文件名播放下一个文件 - 我只是不知道如何导致该事件在结束时发生这首歌。或者,如果需要的话,我可以使用基于 Javascript 的播放器,例如 JPlayer (http://www.jplayer.org/)。
我猜有某种回调函数可以与 JQuery 结合使用?
HTML5 音频标签有一个事件“onending”,当媒体到达末尾时运行,但由于您希望继续播放,因此应该使用“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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)