Question

可能重复：
HTML5 audio element with dynamic source

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

这是玩家：

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

HTML5音频结束功能

1 个答案: