微信IOS中搖一搖無法播放聲音

godruoyi發表於2017-06-27
iOS

Description

IOS系統中無法自動播放media，必須由使用者發出互動動作（如click, touchstart）才能播放。

但在微信瀏覽器中，我們可以新增WeixinJSBridgeReady Listener來解決這一問題。

Page

<audio  id="audio_start_shake" controls="controls" preload="auto">
    <source src="/images/shake_first_two_frame.mp3" type="audio/mpeg" />
</audio>

JavaScript


var audio = document.getElementById(`audio_start_shake`);
document.addEventListener("WeixinJSBridgeReady", function weixinjsbridgeready() {
    audio.load();
}, false);

//搖一搖Listener
window.addEventListener(`shake`, function shakeListener() {
    audio.play()
}, false);

若上述解決方案依舊無法播放聲音，可以簡單採用下面這種方法

var audioAutoPlay = function (el) {
    var audio_el = document.getElementById(el);
    audio_el.play();
    
    document.addEventListener("WeixinJSBridgeReady", function () {
        audio_el.play();
    }, false);    
}

//使用
audioAutoPlay(`audio_start_shake`)

Option

這種解決方案只能滿足微信瀏覽器,在PC端還是會存在無法播放聲音問題

上面採用的手機搖一搖事件庫
推薦的手機音訊播放庫

References

alanoy.com
花神的部落格
簡書-Leo_大俊

相關文章