HTML5 audio标签 src属性赋值顺序问题

有这么个需求:拿到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;

 

还一种修改办法: 把那行注释打开

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值