javascript - HTML5 音频结束功能

Question

可能重复：
具有动态源的 HTML5 音频元素

我试图让播放器在当前曲目结束后重新加载新曲目，但我想我可能做错了什么。

这是播放器：

<audio id="audio" autoplay controls="controls" onclick="start()">
<source src="song.php" type="audio/mpeg" />
</audio>

这是脚本：

function start(){
    var audio = document.getElementById('audio');
    audio.play();
    audio.addEventListener('ended',function(){
        $.post("song.php", function(result){
        audio.src = result;
        audio.pause();
        audio.load();
        audio.play();
    });
    });
}

如果我将脚本更改为此，它可以工作......但我不想重新加载整个页面：

function start(){
    var audio = document.getElementById('audio');
    audio.play();
    audio.addEventListener('ended',function(){
        window.location = 'player.html';
    });
}

Answer 1

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

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查询参数将确保每次都实际调用该文件。