微信的audio无法自动播放的问题
一、问题
最近做了一个html5的项目,里面涉及到音乐播放,项目要求音乐进入页面就自动播放,于是我就想到了html5的audio标签,将mp3引入进去。
1.在audio标签里引入了autoplay属性;
经过测试发现Android上可以自动播放,ios上无法自动播放。
<audio id="audio" src="1.mp3" autoplay="autoplay"></audio>
2.在js文件中执行audio.play();
经过测试发现Android上可以自动播放,ios上无法自动播放。
var audio=document.querySelector("#audio"); audio.play();
二、原因
ios 为了节省用户流量,对于 audio 和 video标签的 preload 和 autopaly 标签 会自动拦截,
除非用户手动点击 交互才会执行 。
三、解决办法
前提:进入页面就自动播放
1.方法一
ps:此方法转载自(http://www.cnblogs.com/xiezhonglong/p/5780942.html)
//使用微信现在提供过的微信js-sdk 在ready中进行播放便可。 //首先引用js :
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> //然后写方法 : function autoPlayAudio1(){ wx.config({ // 配置信息, 即使不正确也能使用 wx.ready debug: false, appId: '', timestamp: 1, nonceStr: '', signature: '', jsApiList: [] }); wx.ready(function() { document.getElementById('audio').play(); }); }
autoPlayAudio1();
2、方法二
var audio=document.querySelector("#audio"); document.addEventListener("WeixinJSBridgeReady",function(){ audio.play(); },false);
前提:异步操作的自动播放(比如页面2s之后自动播放音乐)
要实现异步操作下的自动播放,上边的第一种方法可以用,第二种方法已经不适用
1.方法一
//使用微信现在提供过的微信js-sdk 在ready中进行播放便可。 //首先引用js : <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> //然后写方法 : function autoPlayAudio1(){ wx.config({ // 配置信息, 即使不正确也能使用 wx.ready debug: false, appId: '', timestamp: 1, nonceStr: '', signature: '', jsApiList: [] }); wx.ready(function() { document.getElementById('audio').play(); }); } setTimeout(autoPlayAudio1,2000);
2.方法二
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="div1" style="display: none;"></div> <audio src="1.mp3" id="audio"></audio> </body> <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script type="text/javascript"> setTimeout(function() { wx.getNetworkType({ success: function(res) { document.querySelector("#audio").play(); } }); }, 2000); </script> </html>
3.方法三
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="div1" style="display: none;"></div> <audio src="1.mp3" id="audio"></audio> </body> <script type="text/javascript"> setTimeout(function(){
//下面的'getNetworkType'并不是固定不变的,可以用'getLocation'等替代
WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
document.querySelector("#audio").play();
});
},2000);
</script>
</html>
4.方法四
该方法是用的HTML5的音频接口AudioContext来实现的,查看更多
PS:该方法暂停之后重新播放是从头开始,与audio标签不同
function MyAudio(url) { window.AudioContext = window.AudioContext || window.webkitAudioContext; this.audioContext = new AudioContext(); this.audioBuffer = null; var xhr = new XMLHttpRequest(); xhr.open("get", url, true); xhr.responseType = "arraybuffer"; var _this = this; xhr.onload = function() { _this.audioContext.decodeAudioData(xhr.response, function(buffer) { _this.audioBuffer = buffer; console.log(this.currentTime); if(typeof callback == "function") { callback.call(_this, buffer); } }); } xhr.send(); } //执行音乐播放 MyAudio.prototype.play = function() { if(this.audioBuffer) { this.source = this.audioContext.createBufferSource(); this.source.buffer = this.audioBuffer; this.source.connect(this.audioContext.destination); this.source.start(0); } } //执行音乐停止 MyAudio.prototype.stop = function(buffer) { if(this.source) { this.source.stop(0); } } var audio = new MyAudio("./1.mp3"); setTimeout(function() { audio.play(); });
四、总结
现在总结一下能够通用的方法(兼容ios和android)
; void function (win, doc, undefined) { // 原理:模拟用户触发播放 Audio.prototype._play = Audio.prototype.play; HTMLAudioElement.prototype._play = HTMLAudioElement.prototype.play; function wxPlayAudio(audio) { WeixinJSBridge.invoke('getNetworkType', {}, function (e) { audio._play(); }); } function play() { var that = this; that._play(); try { wxPlayAudio(that); return; } catch (e) { document.addEventListener("WeixinJSBridgeReady", function(){ that._play(); }, false); } } Audio.prototype.play = play; HTMLAudioElement.prototype.play = play; }(window, document);
以上是自己的一些心得,如果有不对的地方希望能多多指教