苹果手机前端audio音乐自动播放功能的实现

来源：互联网 2023-02-20 23:43:07 70

移动端开发时，audio标签中autoplay在苹果手机上被禁止，为了解决这个问题，想到了两种解决方案

工具/原料

PC,苹果手机
webstorm或者其他编辑工具

方法/步骤1

第一种方法，在微信浏览器打开时，在wx.reday函数内播放音乐，可以跨过苹果手机不能播放音乐的坑。

1此文章未经许可获取自百度经验

第一步：必须引用jweixin-1.0.0.js。在html中使用audio标签，并引用jweixin-1.0.0.js文件

script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js">/script>

苹果手机前端audio音乐自动播放功能的实现

第二步：在新建的js文件中，使用如下图方法。备注：wx.cofig文件的配置可参考微信开发者文档-网页授权进行配置，正确与否无关，但必须有，即使错误也会进入wx.reday函数。在wx.reday函数内，进行音乐的播放就可以了。

苹果手机前端audio音乐自动播放功能的实现

这种方法适合在微信内打开，在手机浏览器内的方法目前还不知道，欢迎大家补充。

方法/步骤2

第二种方法，不需要进行微信的一些配置，但是这种方法有种缺陷就是必须要用户点击做一次点击事件。

在这个方法里面，有两种可能，一种是自动循环播放页面，这个一般用户进入页面之后，触碰到body内的任何一个元素，即开始播放音乐，这个简单不提。

主要说第二种情况，是我自己项目上碰到的，我根据我碰到的情况来说一下解决方法。我这个需求是，当点击上传图片按钮，会打开用户本地资源选择照片，用户选择好图片之后，图片即可是上传，上传的同时需要播放音乐，上传完成则音乐停止。因为只有一个上传图片按钮，我没法再用户点击这个按钮的时候就播放音乐（这样用户在选择照片时还有音乐会很奇怪）。

而如果我采用当用户选择完图片开始上传这个事件的时候播放音乐，又被苹果系统禁止了。这就很尴尬了，所以我想到一个折中的办法。

我是这么做的，当用户点击上传图片按钮式，播放音乐，但这个时候播放的音乐文件是一个没有声音的文件（这样即使播放了，用户也感觉不到），这样，图片开始上传时，改变音乐文件，将文件的src改变成自己需要播放的文件，这样就可以达到上传图片时间触发音乐播放。

苹果手机前端audio音乐自动播放功能的实现