微信浏览器自动播放音频(兼容Android和iOS)

由于各大浏览器更新之后不再支持自动播放音频了,微信浏览器也同样如此,本人做项目有个页面需要使用到浏览器自动播放,这里需要用到微信浏览器,本人使用以下方式实现了微信浏览器在android和ios的自动播放功能

<!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>
  使用WeixinJSBridge 安卓苹果均能自动播放
</body>

<script>
  // 初始化一个音频类，src资源可以是本地的有额可以是服务器上的
  var sound1 = new Howl({
    src: ['https://take-saas.oss-cn-hangzhou.aliyuncs.com/smile.mp3'],
    autoplay: true,
    loop: true,
    preload: true,
  })

  // 音频资源 load 之后通过微信桥接触发播放
  sound1.on('load', () => {
    window.WeixinJSBridge && window.WeixinJSBridge.invoke('getNetworkType', {}, () => {
      sound1.play()
    }, false)
  })

</script>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

参考链接地址第一个二维码扫码实现,案例也是第一个

相关阅读:
第三章-Mybatis源码解析-以xml方式走流程-mapper解析（三）
八股操作系统和计算机网络
点云处理【一】(点云数据采集)
百题千解计划【CSDN每日一练】计数问题（附解析+多种实现方法：Python、Java、C、C++、JavaScript、C#、go）
haproxy+keepalived实战
ESP8266-Arduino编程实例-MMA8452加速度计驱动
数据挖掘、机器学习、深度学习的区别
Ubuntu20.04--嵌入式Linux从零开始
linux安装mysql8.0
禁止瘟疫清零计划 Project Zero与VR一起启动

原文地址：https://blog.csdn.net/weixin_68658847/article/details/134504871