通过howler.js实现在Android下的微信浏览器自动播放音频

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