html 5 音频文件播放完毕后重定向到新页面答案

【问题标题】：redirecting to a new page when an html 5 audio file has finished playinghtml 5 音频文件播放完毕后重定向到新页面
【发布时间】：2014-09-01 21:55:43
【问题描述】：

我正在播放带有文本的有声读物章节，并希望它在 html5 音频文件完成后自动重定向到带有下一章文本和音频的新页面。

我不是程序员，所以我需要一些帮助。

我知道我需要使用 addEventListener 和类似于下面的结束函数，但我不知道如何修改它以调用新页面而不是新音频文件。

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

【问题讨论】：

标签： javascript html audio html5-audio

【解决方案1】：

使用ended 事件并重定向：

http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#event-media-ended

function redirectHandler() {
  window.location = 'http://example.com';
}

audio.addEventListener('ended', redirectHandler, false);

演示：http://jsfiddle.net/tqam3zyf/2/

【讨论】：

【解决方案2】：

当你使用时

this.src = "song2.mp3?nocache="+new Date().getTime();
this.play();

您设置音频元素的当前来源。

如果您想加载新页面而不是当前页面，您可以使用：

window.location = "your_url";

【讨论】：