IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> 通过howler.js实现在Android下的微信浏览器自动播放音频 -> 正文阅读

[移动开发]通过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

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2022-09-30 01:04:20  更:2022-09-30 01:06:50 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/19 21:06:04-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码