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

在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');
    }
}

 

posted @ 2016-10-31 15:52  黑客PK  阅读(504)  评论(0编辑  收藏  举报