完美修复手机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)得到具体数值后再插入进去。
这方法虽然简单,但也不失为一种方法,暂时我只想到了这个办法,不知还有没有其它办法。
2
文章作者: “秋了秋”个人博客,本站鼓励原创。
转载请注明本文地址:http://netblog.cn/blog/398.html