howler.js是一个把webaudio进行封装的一个js库，通过它可以轻松的对音频文件进行控制播放、暂停、甚至指定播放音频中的某个片段、以及加快等等，这里我们只关注它在微信浏览器中自动播放的问题，有需要了解的可以去官网看看。
官网： https://howlerjs.com/
文档： https://github.com/goldfire/howler.js#documentation
github： https://github.com/goldfire/howler.js
简易使用范例：
// 初始化一个音频类
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标签模式根本不用去尝试了，因为被微信规则明确禁止了，看下面的公告：
公告地址：https://developers.weixin.qq.com/community/develop/doc/000e640d77cfa001132a6cb8456c01
对于在线语音接口的情况，如果在安卓上也要实现自动播放只能先下载再用howler.js来播放了。
微信h5自动播放音频的总结：
1.普通的音频：
Android可以自动播放；IOS可以播自动放。
2.在线语音接口生成的音频：
Android不可以自动播放；IOS可以播自动放。Android要实现自动播放只能先下载语音，然后再用方法1
本文含有隐藏内容，请 开通VIP 后查看