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>
var sound1 = new Howl({
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>
var sound1 = new Howl({
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>
var vConsole = new window.VConsole();
</script>
</html>
但是需要注意的是如果src指定的是一个语音接口生成的音频,比如百度在线音频,那么需要指定html5参数才能播放。
var sound1 = new Howl({
src: ['百度在线语音生成接口地址。。。'],
html5: true,
});
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
|