《如何让苹果机自动播放背景音乐》

最新推荐文章于 2021-03-23 18:35:31 发布
最新推荐文章于 2021-03-23 18:35:31 发布
阅读量3.8k 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dongguan_123/article/details/76475817
版权
在微信项目中，为了实现苹果设备上背景音乐的自动播放，遇到 autoplay 属性无效的问题。由于苹果手机出于流量考虑，默认禁止媒体文件自动播放。为解决此问题，可以引入微信的 JS，通过监听页面加载事件，在用户交互后触发音乐播放。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这次在微信项目中用到了背景音乐，要求加载完成后自动播放。

首先想到的肯定是audio标签啊，加上autoplay属性就可以了吧，于是就有了下面的代码：

 <audio loop autoplay="autoplay" controls id="bgMusic" src="./music/musicMin.mp3"></audio>
用安卓接测试，没啥毛病，可是到了苹果机上就没反应了 大哭

怎么回事呢？上网一查，原来是苹果手机怕用户是在流量状态下，如果自动播放将会消耗大量流量，所以很贴心的默认设置了媒体文件不能自动播放，即便是设置了autoplay也是无效的，必须用户自己点击才能播放。这可咋办?

  于是就有了下面的解决办法：

  首先引入微信的js：

<script src="http://res.w
最低0.47元/天 解锁文章
H5 自动播放背景音频，兼容安卓和苹果手机， ios createInnerAudioContext 无法自动播放解决
a_靖的博客
03-03 5986
原因应该是IOS不允许自动播放音频，需要与用户有交互，就是用户点击一下之后，再调用就可以了 在main.js Vue.prototype.playAudio = function(audioUrl) { var innerAudioContext = null; innerAudioContext = uni.createInnerAudioContext(); //创建播放器对象 innerAudioContext.autoplay = false; innerAudioContext
微信小程序 - 详细实现页面后台静默播放背景音乐播放音频效果，适合在页面右上角悬浮一个旋转音乐盒可随时让用户静音暂停，页面不会显示任何音乐播放器卡片、播放信息等，音乐碟片旋转背后播放歌曲在前台看不到！
王二红
03-24 3014
微信小程序，vue2，vue3，页面播放背景音乐，播放音频，页面背景音乐播放器控件，音乐盒，悬浮图标可静音，音频后台播放，背景音频，开启悬浮窗功能，北京播放，生日祝福H5页面带背景播放音乐，离开后背景音乐还是播放呢，ios静音状态下无声音、音频播放创建多个等问题，IOS真机无法播放声音，图标360旋转动画，点击静音和取消静音，活动页面，右上角挂载一个悬浮图片用来控制背景音乐的播放与暂停，音乐播放CD旋转效果，封面旋转，悬浮球，一进入页面就开始播放，后台播放，旋转，微信小程序后台播放音乐，页面离开切换暂停，w
背景音乐自动播放
09-19
分享一下，供大家参考，希望大家可以用到，好吧，就这些！
自动播放背景音乐兼容ios
junyu1024的博客
12-30 435
<audio id="bg-music" src="1.mp3" autoplay="autoplay" controls></audio> // DOM中的内容加载完毕之后，调用函数 document.addEventListener('DOMContentLoaded', musicInWeixinHandler); function musicInWeixi...
iOS微信端 audio 自动播放背景音乐
三三
01-24 635
最近有一个要求添加背景音乐的需求，我jio得OK，音频文件发给我就好啦(～￣▽￣)～ 卟啦卟啦写完了，浏览器调试一切都没问题，最后测试才发现iOS系统的没 有 音 乐！！！嗯？ 瞬间就jio得才疏学浅~ 最后，也算是得到了解决，￣へ￣，iOS基于安全考虑的限制，不允许自动播放audio和vedio。 解决方案： 监听WeixinJSBridgeReady事件 微信的JS API建立在微信壳浏览...
ios背景音乐自动播放js代码
盏茶作酒的博客
04-13 1745
手机自带的机制为用户减少流量，屏蔽了音乐自动播放功能，但有时我们要用到音乐自动播放，下面的js代码可以让手机自动播放背景音乐$(function(){            // ios音频自动播放2            $(document).one('WeixinJSBridgeReady', function () {                var audio = document...
ios系统微信H5页面背景音乐自动播放
TurtleOrange的博客
11-04 1290
思路：在html页面代码内嵌小程序的代码块，可让ios手机自动播放背景音乐 注意：微信小程序的代码块script脚本必须写在html文件，不可外部引入 html代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maxi
HTML5 解决苹果手机不能自动播放音乐问题
01-21
这篇文章给大家介绍html5解决苹果手机不能自动播放音乐问题，解决方法如下一段代码: 引用： [removed][removed] [removed] function autoPlayAudio() { wx.config({ // 配置信息, 即使不正确也能使用 wx.ready ...
H5自动播放背景音乐（IOS和安卓）
heartcnc的博客
03-23 2740
安卓与IOS播放 安卓可以直接使用audio标签进行播放 <audio ref="sound" :src="bgm.mp3" loop /> const audio = document.querySelector('audio') audio.play() IOS端需要借助微信自带的事件进行播放 const audio = document.querySelector('audio') document.addEventListener('WeixinJSBridgeReady',
HTML5 解决苹果手机audio不能自动播放音乐问题
☆╮123☆
04-03 2871
html5解决苹果手机不能自动播放音乐问题，解决方法如下一段代码: <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> function autoPlayAudio() { wx.config({ // 配...
php自动实现MP3播放器效果
07-19
php自动实现MP3播放器效果，很炫的效果。很漂亮。
解决iPhone手机音乐不能自动播放问题
hylcyz的专栏
08-22 6742
在做h5开发的时候需要插入背景音乐，使用 html 的 audio 标签 可以实现，但是在开发过程中发现iPhone手机打开h5页面时音乐并不会自动播放，而是要点一下屏幕才会自动播放，上网找了半天，各种踩坑，最終还是找到解决方案。   解决方案如下： &lt;div id="musicImg" class="music_img rotate"&gt;&lt;img onclick="so_...
UMEditor加入音乐功能
张新意专栏
10-23 1809
1.添加plugin UM.plugins['music'] = function(){ var me = this; this.addOutputRule(function(root){ $.each(root.getNodesByTagName('audio'),function(i,a){ var _src = utils.htm
解决ios下的微信打开的页面背景音乐无法自动播放
关注前端
03-10 9225
在做各种HTML5场景页面的时候，插入背景音乐是一个很普遍的需求。我们都知道，IOS下的safari是无法自动播放音乐的，以至一直以来造成一种错误的认识，iso是无法自动播放媒体资源的。直到微信火爆起来，我们发现IOS的微信里面打开的页面却可以实现自动播放。这种情况颠覆了我之前的认知。但是，但是。。。最近的项目，又发现了一个头疼的问题。部分的IOS微信，打开有自动播放背景音乐的页面没有声音！！最头
解决ios下的微信页面背景音乐无法自动播放问题
热门推荐
natalie86的专栏
05-25 2万+
前言 在做各种HTML5场景页面的时候，插入背景音乐是一个很普遍的需求。我们都知道，iOS下的safari是无法自动播放音乐的，以至一直以来形成了一种认知，iOS是无法自动播放媒体资源的。直到微信火爆起来，发现iOS的微信里面打开的页面却可以实现自动播放。这种情况颠覆了之前的认知。但是，但是。。。最近的项目，又发现了一个头疼的问题。部分的iOS微信，打开有自动播放背景音乐的页面没有声音！最头
IOS微信浏览器无法自动播放背景音乐的解决办法
vinchin的博客
09-27 2556
IOS系统为了节省用户的流量，禁止了audio标签的自动播放，所以在苹果手机上H5的audio标签不能自动播放，目前我只找到了微信浏览器上的解决办法。 &lt;body&gt; &lt;audio id="bgmusic" src="audio/9282.wav" loop="loop"&gt;&lt;/audio&gt; &lt;/body&gt; &lt;scr
iTunes功能深度解析：音乐管理与播放体验
7. **音乐播放**：支持多种音频格式，具有可视化效果以增强听觉体验，可调节音量，并内置均衡器以适应不同音乐风格。 8. **下载**：用户可以直接在iTunes Store下载购买的音乐、视频、电视节目等。 9. **其他功能*...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值