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