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_大俊