一、问题
最近做了一个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);
以上是自己的一些心得，如果有不对的地方希望能多多指教