关于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');

    }

}

巴特西

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

最新文章

热门文章