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

左手喵子

已于 2024-02-04 14:17:39 修改

阅读量542

点赞数 1

分类专栏：浏览器文章标签：微信

于 2024-02-03 15:04:55 首次发布

本文链接：https://blog.csdn.net/weixin_42017221/article/details/136008285

版权

浏览器专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

1.引入js

<script src="animate/howler.min.js"></script>

官网下载 howler.js - JavaScript audio library for the modern web

2.代码

<!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
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
微信浏览器自动播放音频(兼容Android和iOS)

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

扫一扫