当前位置: 秋叶网络博客 前端编程 ◊ 完美修复手机UC浏览器播放小片段audio音乐的BUG

完美修复手机UC浏览器播放小片段audio音乐的BUG

作者:秋叶 发表时间:2015年10月11日

发现手机uc浏览器有个严重的bug,对于网页中存在小片段audio标签的音乐播放,会无限循环的播放,即使设置了loop为false依旧没用,其它浏览器不会有这种现象。这样就会造成严重的用户体验问题,比如说网页中点击某个链接的声音,往往不到半秒就播放完成,然而在uc上意味着点一次链接就会一直存在这个声音循环,甚是讨厌。

既然它不会停止,我们就用js让它停止:

var music=document.getElementById("music");//获取音乐所在标签
music.currentTime = 0;//播放之前先复位,非常重要
music.play();//这是播放
setTimeout(function(){music.pause()},300);//播放300ms后停止,300为声音片段的长度

为什么music.currentTime = 0;复位非常重要,在于,如果没有这个但你后面的时间又计算不准的话,再循环一次这个方法,它就会接着上次暂停的地方开始播放而不是从头播放,可以理解为停止音乐而非暂停音乐,虽然这些误差都是几十毫秒,但是方法循环多了就会出现另一严重bug。你也可以用parseInt(music.duration*1000)获取音频的实际长度来代替300,但我试了下,发现这uc浏览器是识别不了小片段音频的播放长度duration的,所以可以在电脑端输出parseInt(music.duration*1000)得到具体数值后再插入进去。

这方法虽然简单,但也不失为一种方法,暂时我只想到了这个办法,不知还有没有其它办法。

1
文章作者: 秋叶网络博客,本站鼓励原创。
转载请注明本文地址:https://www.mizuiren.com/blog/398.html
目录:前端编程标签:audio bug 11451次阅读
登 录
点击获取验证码
还没账号?点击这里