ios微信客户端中声音无法播放

html中audio标签

<audio src="http://wx.masrbs.com/Addons/HFive/View/default/Public/music/flipsound.mp3" id="Jaudio" class="media-audio" preload="preload" ></audio>

js中播放代码

app.audioAutoPlay=function(id){
    var audio = document.getElementById(id),
    play = function(){
        audio.play();
        //document.removeEventListener("touchstart",play, false);
    };
    audio.play();
    document.addEventListener("WeixinJSBridgeReady", function () {
        play();
    }, false);
    //document.addEventListener("touchstart",play, false);
}

在ios中点击按钮触发声音播放是可以的,但是在滑动屏幕代码中调用播放声音代码是无效的。在andriod下都没有问题。

网上查找了很多资料,发现以下两段话:

  1. 上面的解决方案的核心是利用了微信在ready的时候会有个WeixinJSBridgeReady/YixinJSBridgeReady事件,通过监听这个事件来触发的。那有个坑就是如果微信已经ready了,但还没执行到你监听这个ready事件的代码,那么你的监听是没用的,所以监听的js一定要放在head的开始位置(放在css外链之前),确保最先执行,切记!切记!。重要的事情说三遍。
  2. 另一个点就是,本文的解决方案只适合一开始就播放的背景音乐。如果你是做那种微信场景(打开页面模拟收到很多条微信,每条微信都要播放那段音效),实际上本文的解决方案是不行的。因为ready的事件只会执行一次,即使你在ready事件里面用setTimeout或者setInterval也可能会导致丢失情况。
window.onload=function(){
var shakeMusic = document.getElementById("Jaudio");
console.log(shakeMusic);
// 微信提供的事件,微信浏览器内部初始化完成后
document.addEventListener("WeixinJSBridgeReady", function () {
 shakeMusic.load();
}, false);

};

此段代码放入setTimeout函数中,无法监听weixinjsbridgeready事件的。我的页面执行是先执行加载资源文件,加载完毕渲染页面,将监听代码放入加载完毕渲染页面方法中也无效。

 将以上代码加载滑动播放声音代码之前,问题解决。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章