howler.js是一个把webaudio进行封装的一个js库，通过它可以轻松的对音频文件进行控制播放、暂停、甚至指定播放音频中的某个片段、以及加快等等，这里我们只关注它在微信浏览器中自动播放的问题，有需要了解的可以去官网看看。
github：github.com/goldfire/ho…
简易使用范例：
// 初始化一个音频类 var sound1 = new Howl({ src: ['xxx.mp3'], }); // 播放音频 sound1.play();
完整代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"> <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script> <title>howler.js 测试</title> </head> <body> Android可自动播放<br> IOS需手触碰播放 </body> <script> // 初始化一个音频类，src资源可以是本地的有额可以是服务器上的 var sound1 = new Howl({ //src: ['js/515a_5508_520b_f0cf47930abbbb0562c9ea61707c4c0b.mp3'], src: ['http://m8.music.126.net/21180815163607/04976f67866d4b4d11575ab418904467/ymusic/515a/5508/520b/f0cf47930abbbb0562c9ea61707c4c0b.mp3'], }); // 播放音频 sound1.play(); </script> </html>
以上代码在Android可以自动播放，IOS不可以自动播放需要手点击触发才能播放。
IOS想要自动播放得再加上微信的WeixinJSBridge，代码更改后如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script> <script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> <title>howler.js 测试自动播放 使用WeixinJSBridgeReady</title> </head> <body> 使用WeixinJSBridgeReady 安卓苹果均能自动播放 </body> <script> // 初始化一个音频类，src资源可以是本地的有额可以是服务器上的 var sound1 = new Howl({ //src: ['js/515a_5508_520b_f0cf47930abbbb0562c9ea61707c4c0b.mp3'], src: ['http://m8.music.126.net/21180815163607/04976f67866d4b4d11575ab418904467/ymusic/515a/5508/520b/f0cf47930abbbb0562c9ea61707c4c0b.mp3'], }); // 播放音频 document.addEventListener('WeixinJSBridgeReady', function() { sound1.play(); //安卓苹果均有效 }, false); </script> <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script> <script> // VConsole 默认会挂载到 `window.VConsole` 上 var vConsole = new window.VConsole(); </script> </html>
但是需要注意的是如果src指定的是一个语音接口生成的音频，比如百度在线语音，那么需要指定html5参数才能播放。
// 初始化一个音频类 var sound1 = new Howl({ src: ['百度在线语音生成接口地址。。。'], html5: true, // A live stream can only be played through HTML5 Audio. }); // 播放音频 sound1.play();
不过这样跟试用audio标签没有什么区别了，测试结果是在Android无法自动播放。只能通过touchstart事件触发播放，在IOS上照样没问题。
其实在Android上只要是audio标签模式根本不用去尝试了，因为被微信规则明确禁止了，看下面的公告：
公告地址：developers.weixin.qq.com/community/d…对于在线语音接口的情况，如果在安卓上也要实现自动播放只能先下载再用howler.js来播放了。
微信h5自动播放音频的总结：
1.普通的音频：
Android可以自动播放；IOS可以播自动放。
2.在线语音接口生成的音频：
Android不可以自动播放；IOS可以播自动放。Android要实现自动播放只能先下载语音，然后再用方法1
