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

无·法

已于 2023-04-04 16:01:59 修改

阅读量2.3k

点赞数 2

分类专栏：学习前端文章标签： javascript android 微信

于 2022-09-26 13:08:15 首次发布

本文链接：https://blog.csdn.net/sysdzw/article/details/127051394

版权

学习同时被 2 个专栏收录

115 篇文章 6 订阅

订阅专栏

前端

14 篇文章 0 订阅

订阅专栏

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>
</html>

但是需要注意的是如果src指定的是一个语音接口生成的音频，比如百度在线音频，那么需要指定html5参数才能播放。

// 初始化一个音频类
var sound1 = new Howl({
  src: ['百度在线语音生成接口地址。。。'],
  html5: true, // A live stream can only be played through HTML5 Audio.
});

// 播放音频
sound1.play();

不过设置html5: true这个参数的话就跟直接使用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

无·法

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
通过howler.js实现在Android下的微信浏览器自动播放音频

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

扫一扫