Question

我有一个基本的音频播放器：

<audio controls="controls" autoplay="true" loop="loop">
<source src="song.php" type="audio/mpeg" />
</audio>

而不是直接指向MP3文件的源代码我指向一个PHP文件，然后指向MP3文件，它可以工作。但是，当当前曲目结束时，PHP文件指向一个新的MP3文件。所以，我遇到的问题是当播放器进入循环时，使用新的MP3文件，它完全停止工作。有没有办法解决？有没有办法用播放列表或任何其他播放器来做到这一点？

Answer 1

从您的duplicate question：

复制

对于初学者，每次单击元素时都会附加一个新的事件处理程序。如果有人经常暂停音乐，他们就会遇到问题。

Intead，试试这个：

<audio id="audio" autoplay controls src="song.php" type="audio/mpeg"></audio>
<script type="text/javascript">
    document.getElementById('audio').addEventListener("ended",function() {
        this.src = "song.php?nocache="+new Date().getTime();
        this.play();
    });
</script>

我假设song.php是一个返回音频数据的PHP文件。 nocache查询参数将确保每次实际调用该文件。

Answer 2

我认为问题是你需要在当前歌曲结束后发出请求，你可以实现这个，将ended事件监听器添加到音频元素：

HTML

<audio id="player" controls="controls" autoplay="true" loop="loop">
<source src="song.php" type="audio/mpeg" />
</audio>

的Javascript

var audio = $("#player");
audio.addEventListener("ended", function(){
    $.post("song.php", function(result){
        audio.src = result;
        audio.pause();
        audio.load();//suspends and restores all audio element
        audio.play();
    });
});

注意：如果您仍有问题，请在问题中包含PHP代码并检查您的PHP文件是否为getting the proper header

Answer 3

随机选择是否必须由php完成？

如果没有，告诉javascript选择范围内的随机ID可能会更简单。然后将其作为GET参数传递给您的PHP脚本。

在php方面，执行ID＆gt;的映射。 MP3文件，使相同的ID始终对应同一个MP3。你可以使用你想要的任何东西：简单的关联数组，数据库等。事实上，ID甚至不必是数字。

如果您不希望有人发现您的地图并说，直接拨打带有ID X的wscript下载您的MP3，您可以在每个会话中更改您的地图，例如....重要的是给定的ID至少在合理的时间段内始终引用相同的MP3。

我还可以说从php重定向到MP3文件可能会给某些浏览器带来问题。最好发送正确的HTTP头并直接返回文件内容而不重定向。快速举例：

<?php
$file = "something.mp3";
header("Content-Type:audio/mpeg");
header("Content-LEngth:".filesize($file));
readfile($file);
?>

有关readfile和header函数的更多信息

Answer 4

也许最好的方法是在查询字符串中使用唯一的Request ID变量。然后，对于每个请求，您可以确定它是循环请求还是新请求或新的随机化请求。

你知道怎么做吗？如果不是，我将包括代码。

带动态源的HTML5音频元素

4 个答案:

HTML