【兼容问题】ios不能自动播放音频【兼容问题】ios不能自动播放音频

103 阅读 0 评论 68 点赞

我是靠谱客的博主眼睛大眼睛，这篇文章主要介绍【兼容问题】ios不能自动播放音频【兼容问题】ios不能自动播放音频，现在分享给大家，希望可以做个参考。

【兼容问题】ios不能自动播放音频

在这里插入图片描述

一般网页里自动播放音频的代码如下

复制代码

1
2
<audio src="/music/BGM.mp3" autoplay ></audio>

问题：但是ios的机制导致这一属性无法产生效果，必须手动点击已经渲染出来的DOM才可以播放。

PS:无论是直接写DOM，还是用js生成都无法触发自动播放，连加载完成的监听属性也封锁了，因此也无法监听音频文件是否加载完成，

解决思路：按着ios的安全机制，必须要点击音频的DOM,那么我们就去用JS产生点击这个操作

借助工具：微信JS SDK

复制代码

1
2
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

将以上代码写入文件，vue项目放入/public/index.html文件里的head里

用法

1.直接自动播放

复制代码

1
2
3
4
5
6
wx.config({...});//微信jssdk注册
wx.ready(function () {
     let Audio = this.$ref.Audio//这里是vue写法，返回的是音频的dom
     Audio.play()//这里就可以播放了
})

2.预加载音频文件
有时候为了用户体验，必须预加载音频文件（音频文件一般比较大，加载过慢，会导致点击和播放之间的时间差，需要预先加载）

复制代码

1
2
3
4
5
6
7
8
9
10
11
wx.config({...});//微信jssdk注册
 wx.ready(function () {
    let Audio = new Audio();
    Audio.ref='/music/BGM.mp3'
    Audio.muted = true;//静音
    Audio.play();//播放
    Audio.pause();//暂停
    Audio.muted = false;//取消静音
})