首页 > 其他 > 详细

关于audio元素在实际项目中遇到的问题总结

时间:2016-10-31 16:22:24      阅读:202      评论:0      收藏:0      [点我收藏+]

在ios高版本的微信浏览器下(ios10.0以上),audio标签如果添加autoplay属性的话。导致的问题是:通过二维码扫码第一次进入没有问题,第二次扫码进入之后直接卡死在loading页面。

解决方案:去除autoplay属性,通过js触发音乐播放即可解决问题。

所以在使用audio时,尽量不要随意添加属性。有可能导致难以预料的问题。

最佳实现audio的实现是

window.onload的时候执行play()。让其播放。而不是autoplay。

 

window.addEventListener(‘load‘,loadHandler,false);

function loadHandler() {
    var audio = document.querySelector(‘#audio‘);
    var musicBtn = document.querySelector(‘#musicBtn‘)

    audio.play();

    musicBtn.addEventListener(‘click‘,toggleMusic,false);

}

function toggleMusic(audio){
    if(audio.paused){
        audio.play();
        musicBtn.addClass(‘on‘);
    }else{
        audio.pause();
        musicBtn.removeClass(‘on‘);
    }
}

 

关于audio元素在实际项目中遇到的问题总结

原文:http://www.cnblogs.com/qianduanjingying/p/6016156.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!