H5解决苹果（IOS）不能自动播放音乐 · TP5常用代码

[TOC] ## 解决ios音乐不自动播放时间：2018.11.08 ``` // 解决ios音乐不自动播放 myobj = document.getElementById("main_audio"); myaudio = $('#main_audio_ie8').attr('src'); myobj.src = myaudio; document.addEventListener("WeixinJSBridgeReady", function () { myobj.play(); }, false); ``` ## 方法一：h5 解决苹果手机不能自动播放音乐 ### 1、引入JS `引用：<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> ` ### 2、功能实现 ``` <script> function autoPlayAudio() { wx.config({ // 配置信息, 即使不正确也能使用 wx.ready debug: false, appId: '', timestamp: 1, nonceStr: '', signature: '', jsApiList: [] }); wx.ready(function() { var globalAudio=document.getElementById("bgMusic"); globalAudio.play(); }); }; // 解决ios音乐不自动播放的问题 autoPlayAudio(); </script> ``` ### 3、说明只限微信使用，浏览器不行 ### 4、网址参考 https://www.cnblogs.com/bky-seed/archive/2017/12/14/8036569.html ## 方法二：IOS音乐不能自动播放 ### 1、问题描述在微信端开发H5的时候，audio标签在苹果机上无法进行自动播放 ### 2、原因分析 ``` <audio controls="controls" id="music" loop="loop"> <source src="./assets/sound/music.mp3" type="audio/ogg" /> <source src="./assets/sound/music.ogg" type="audio/ogg" /> </audio> ``` 这是我html上的代码，经过运行发现android机上能够良好的呈现并播放，但是在苹果机上呈现的是一条白杠和一个无法使用的三角形按钮。使用Audio标签的属性进行检测 ``` Media = document.getElementById("music"); alert(Media.networkState);// 状态码显示为3，表示Audio没有找到资源路径 ``` 于是尝试使用js去注入一个路径，发现苹果机的音乐播放问题被解决了 ``` Media.src = "./assets/sound/music.mp3"; Media.play(); ``` ### 3、问题拓展毕竟我和大家遇到的问题不一样，也许这个方法并不能解决大家的问题。这里拓展一下其他的实现方法。 1. 应该是出于IOS系统本身的设计规范缘故，会不允许音乐的自动播放功能。这里我们可以给页面一个touch事件来触发播放功能。 2. 微信自己提供了一个**WeixinJSBridgeReady**事件，我们可以监听这个事件触发播放功能。[微信官方API](http://qydev.weixin.qq.com/wiki/index.php?fulltext=&search=WeixinJSBridgeReady) ``` document.addEventListener("WeixinJSBridgeReady", function () { Media.play(); }, false); ``` ### 4、网址参考微信端开发H5页面的时候，audio标签在苹果机上无法进行自动播放 https://blog.csdn.net/wp_boom/article/details/52161138?locationNum=7 ## 方法三：函数手机端网页苹果手机用H5audio标签无法自动播放音乐处理方法，代码如下； ### 1、HTML ``` <audio id="bgmusic" src="mp3.mp3" autoplay="autoplay" loop="loop" style="display: block; width: 3%; height:3%;"></audio> ``` ### 2、JS ``` <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function() { functionaudioAutoPlay() { varaudio = document.getElementById('bgmusic'); audio.play(); document.addEventListener("WeixinJSBridgeReady", function() { audio.play() }, false) } audioAutoPlay() }); </script> ``` ### 3、网址参考苹果手机用H5audio标签无法自动播放音乐处理方法 https://blog.csdn.net/wait9166/article/details/77573963?utm_source=blogxgwz0 ## 方法四：iOS苹果和微信中音频和视频实现自动播放的方法通过下面的方式可以解决，在iPhone手机微信中正常自动播放。必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效，猜测微信接口做了处理~ ``` <audio preload="preload" controls id="car_audio" src="http://media.xitaoinfo.com/ei_zamenjiehunba.mp3" loop></audio> <video id="video" controls="" preload="none" mediagroup="myVideoGroup" poster="http://media.w3.org/2010/05/sintel/poster.png"> <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"> <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"> <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg"> <p>Your user agent does not support the HTML5 Video element.</p> </video>  <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> //一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以 document.getElementById('car_audio').play(); //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效 document.addEventListener("WeixinJSBridgeReady", function () { document.getElementById('car_audio').play(); document.getElementById('video').play(); }, false); </script> ``` https://www.cnblogs.com/kevin1220/p/5807466.html 微信页面的音乐自动播放实现： https://www.cnblogs.com/kevin1220/p/6429366.html ## 方法五、一种解决h5页面背景音乐不能自动播放的方案场景：微信、浏览器、App 普通解决方案：采用audio标签的autoplay属性 ### 大部分IOS系统和少部分Android微信不支持自动播放【解决方案】微信的JS API建立在微信壳浏览器的内置JS对象WeixinJSBridge上，WeixinJSBridge并不是WebView一打开就有了，客户端需要初始化这个对象，当这个对象准备好的时候，客户端会抛出事件"WeixinJSBridgeReady"。发现部分机型，监听DOMContentLoaded和load事件，在回调中也可以播放音乐；所以，为了保险起见，可以同时监听两个事件，以增强其适用性。【代码如下】 `<audio style="display:none; height: 0" id="bg-music" preload="auto" src="../static/videos/bg-music.mp3" loop="loop"></audio>` ``` document.addEventListener('DOMContentLoaded', function () { function audioAutoPlay() { var audio = document.getElementById('bg-music'); audio.play(); document.addEventListener("WeixinJSBridgeReady", function () { audio.play(); }, false); } audioAutoPlay(); }); ``` ### 部分Android浏览器和所有IOS下Safari浏览器不支持自动播放解决方案：通过手势事件播放音乐　　(1) 监听body的touchstart事件，回调中播放音乐；　　缺点：部分元素的touch事件可能会阻止冒泡，需要在对应的地方调起播放音乐函数　　(2) 可以增加透明层，点击到透明层，播放音乐，关闭透明层；　　缺点：第一次点击按钮元素可能不响应，造成用户体验上的伤害。部分App不支持webview音乐自动播放　　解决方案：1.壳浏览器支持；2.通过手势事件播放音乐【完整代码】 ``` // 音乐播放 function autoPlayMusic() { // 自动播放音乐效果，解决浏览器或者APP自动播放问题 function musicInBrowserHandler() { musicPlay(true); document.body.removeEventListener('touchstart', musicInBrowserHandler); } document.body.addEventListener('touchstart', musicInBrowserHandler); // 自动播放音乐效果，解决微信自动播放问题 function musicInWeixinHandler() { musicPlay(true); document.addEventListener("WeixinJSBridgeReady", function() { musicPlay(true); }, false); document.removeEventListener('DOMContentLoaded', musicInWeixinHandler); } document.addEventListener('DOMContentLoaded', musicInWeixinHandler); } function musicPlay(isPlay) { var media = document.querySelector('#bg-music'); if (isPlay && media.paused) { media.play(); } if (!isPlay && !media.paused) { media.pause(); } } ``` 网址参考：https://www.cnblogs.com/wmhuang/p/5452259.html