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