有这么个需求:拿到URL后用audio标签进行播放,然后暂停,并记住暂停时间点,之后再拿到相同的URL,把暂停时间点赋值给audio标签的currentTime,这样就实现了从暂停处开始重新播放。
结果测试发现没有从暂停处播放,而是从头开始播放。
经定位确认确实把暂停时间点赋值给audio标签的currentTime了,所以就把这个问题转给浏览器同事看了,以为他们浏览器对audio标签支持的问题。 结果几天都没有结果。由于浏览器那边不好复现此问题。 我就写了个demo复现此问题。
var audio = new Audio(); document.body.appendChild(audio); if (audio != null){ audio.src = "allofMe.mp3"; audio.autoplay = true; audio.controls = true; } setTimeout(function () { audio.pause(); }, 8000); setTimeout(function () { // audio.src = ""; audio.currentTime = 8; audio.src = "allofMe.mp3"; alert("currentTime: " + audio.currentTime); audio.play(); }, 12000);
走读一下代码。audio.src 赋值“allofMe.mp3” 播放本地音乐资源,8秒后暂停,一切正常。 12秒audio标签的currentTime属性赋值为8秒,接下来把audio标签的src重新赋值“allofMe.mp3” 这时打印出currentTime属性为0 。
我们可以这样推测 audio标签重新赋值src后 就相当于重新创建了一个audio标签执行环境,那么audio标签的所有属性都是默认值。是不是如此,得看audio标签的实现源代码了。。。哪位对此比较熟悉,麻烦备注一下,先谢谢。
修改这个bug,还是比较容易的。
交换一下两行代码的顺序就OK:
audio.src = "allofMe.mp3";
audio.currentTime = 8;
还一种修改办法: 把那行注释打开