码迷,mamicode.com
首页 > 其他好文 > 详细

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

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

标签:sed   select   click   ogg   class   pre   remove   log   解决   

在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元素在实际项目中遇到的问题总结

标签:sed   select   click   ogg   class   pre   remove   log   解决   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!