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查询参数将确保该文件实际上是所谓的每一次.