通过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


目录
相关文章
|
2月前
|
安全 算法 小程序
【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
174 28
【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
|
3月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
120 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
6月前
|
JavaScript 前端开发 数据处理
模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致?
综上所述,模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处,也有不同之处。在实际应用中,需要根据具体的场景和性能需求来选择使用哪种字符串处理方式,以达到最佳的性能和开发效率。
148 63
|
6月前
|
算法 开发者
Moment.js库是如何处理不同浏览器的时间戳格式差异的?
总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
193 57
|
6月前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
112 5
在浏览器执行js脚本的两种方式
|
6月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
977 1
|
7月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
1349 1
|
8月前
|
JavaScript 前端开发
js之浏览器对象|28
js之浏览器对象|28
|
9月前
|
机器学习/深度学习 人工智能 前端开发
【人工智能】利用TensorFlow.js在浏览器中实现一个基本的情感分析系统
使用TensorFlow.js在浏览器中进行情感分析是一个非常实用的应用场景。TensorFlow.js 是一个用于在JavaScript环境中训练和部署机器学习模型的库,使得开发者能够在客户端直接运行复杂的机器学习任务。对于情感分析,我们可以使用预先训练好的模型来识别文本中的积极、消极或中性情感。
208 4
【人工智能】利用TensorFlow.js在浏览器中实现一个基本的情感分析系统
|
7月前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
329 0

热门文章

最新文章