当前位置：首页 > article >正文

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

article 2024/11/14 14:04:20

由于各大浏览器更新之后不再支持自动播放音频了,微信浏览器也同样如此,本人做项目有个页面需要使用到浏览器自动播放,这里需要用到微信浏览器,本人使用以下方式实现了微信浏览器在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>