这篇文章上次修改于 2068 天前,可能其部分内容已经发生变化,如有疑问可询问作者。

我的 Kico Player 出现了一个 BUG,开启循环模式的时候重新播放会导致歌词不再更新,而这一切的问题是因为给 audio 开启了 loop 属性之后会无法触发到 ended 事件。而 ended 事件里面设置了歌词的重载函数,会让当前播放的歌重新回到第一句歌词。

现在想到了一个解决方案,我们不再使用 loop 方法来让播放器单曲循环,而是继续采用 ended 事件进行处理,即播放完毕之后检测播放器当前设定的播放模式,如果为循环,则重新帮我 play 一遍。这样就可以完美的解决单曲循环无法触发 ended 事件的问题了。

原先的播放器行为大致是这样的:

var audio = document.createElement("audio");
audio.src = "音乐路径";
audio.loop = true;

// 这样生成的播放器等同于 <audio src="音乐路径" loop></audio>

// 结束时触发
audio.addEventListener("ended", function () {
    reload_lyric(); // 循环播放的时候无法执行
})

而现在的解决办法很简单,例如这样:

var audio = document.createElement("audio");
audio.src = "音乐路径";

// 结束时触发
audio.addEventListener("ended", function () {
    audio.play(); // 不设置 loop 循环来重新播放音乐,达到循环的效果
    reload_lyric(); // 同时重置了歌词进度
})