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

简介: 通过howler.js实现在Android下的微信浏览器自动播放音频
+关注继续查看

image.pnghowler.js是一个把webaudio进行封装的一个js库,通过它可以轻松的对音频文件进行控制播放、暂停、甚至指定播放音频中的某个片段、以及加快等等,这里我们只关注它在微信浏览器中自动播放的问题,有需要了解的可以去官网看看。

官网: howlerjs.com/

文档: github.com/goldfire/ho…

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>

image.png

以上代码在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>

image.png

image.png

但是需要注意的是如果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标签模式根本不用去尝试了,因为被微信规则明确禁止了,看下面的公告:

image.png

公告地址:developers.weixin.qq.com/community/d…对于在线语音接口的情况,如果在安卓上也要实现自动播放只能先下载再用howler.js来播放了。

微信h5自动播放音频的总结:


1.普通的音频:
Android可以自动播放;IOS可以播自动放。
2.在线语音接口生成的音频:
Android不可以自动播放;IOS可以播自动放。Android要实现自动播放只能先下载语音,然后再用方法1


目录
相关文章
|
11月前
|
缓存 Android开发 iOS开发
|
Web App开发 Android开发 iOS开发
微信浏览器 window.location.href
微信浏览器 window.location.href
195 0
|
Web App开发 Linux Android开发
小技巧 - Chrome 浏览器绕过“请在微信客户端打开链接”
小技巧 - Chrome 浏览器绕过“请在微信客户端打开链接”
1925 0
小技巧 - Chrome 浏览器绕过“请在微信客户端打开链接”
|
Web App开发 移动开发 JavaScript
JS - 微信浏览器(H5)语音录音插件(Recorder H5)
JS - 微信浏览器(H5)语音录音插件(Recorder H5)
866 0
|
安全 数据安全/隐私保护
WebApp - 微信浏览器解决安全提示“防盗号或诈骗,请不要输入QQ密码”
WebApp - 微信浏览器解决安全提示“防盗号或诈骗,请不要输入QQ密码”
178 0
WebApp - 微信浏览器解决安全提示“防盗号或诈骗,请不要输入QQ密码”
|
中间件 PHP
【PHP】判断是否微信浏览器访问
【PHP】判断是否微信浏览器访问
140 0
【PHP】判断是否微信浏览器访问
|
Web App开发 前端开发 Android开发
微信浏览器中 Input 标签 CSS 兼容性问题
微信浏览器中 Input 标签 CSS 兼容性问题
117 0
|
iOS开发
微信浏览器中Input的兼容性处理
微信浏览器中Input的兼容性处理
173 0
|
移动开发 开发框架 小程序
Flutter 插件url_launcher简介及使用,打开外部浏览器,拨打电话,发送短信,打开微信,支付宝,qq等
Flutter 插件url_launcher简介及使用,打开外部浏览器,拨打电话,发送短信,打开微信,支付宝,qq等
702 0
Flutter 插件url_launcher简介及使用,打开外部浏览器,拨打电话,发送短信,打开微信,支付宝,qq等
相关产品
云迁移中心
推荐文章
更多