HTML5的audio在手机网页上无法自动加载/播放音乐,能否实现该功能?

在IOS中第一次调用play方法播放音频会被阻止,必须得等用户有交互动作,比如touchstart,click后才能正常调用,在微信中可以通过监听WeixinJSBridgeReady事件来提前播放一个超级短的无声音文件,之后替换src,这样再调用play方法就可以了。

代码如下:

$(document).one('WeixinJSBridgeReady', function () {
    var audio = document.getElementById("audio");
    audio.play(); //执行一次
    audio.setAttribute('src', 'img/shake.mp3'); // 替换src
    audio.load();
})
// 监听摇晃事件简化版
window.addEventListener('devicemotion', function () {
    document.getElementById("audio").play(); // 成功播放
}, false);

 

posted @ 2017-08-29 11:57  星畔  阅读(1601)  评论(0编辑  收藏  举报