1.背景
微信里做H5活動頁面，對音樂使用autoplay, android沒問題，IOS半天播不出來，因此考慮對音樂進行預加載（不是preload）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>audio</title> <style> .m-toggle { background: url('https://dimg04.c-ctrip.com/images/300p0f0000007eqxf6DAD_C_228_132.jpg'); background-size: 100% 100%; background-repeat: no-repeat; position: absolute; right: 10px; top: 50px; width: 28px; height: 28px; display:none; } </style> </head> <body> <div class="m-toggle yinyu" onClick="audioplay()"></div> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script> var audio = document.createElement("audio"); audio.src = "http://m10.music.126.net/20180605235031/35cf08b189d5470e37afa4bc61324559/ymusic/4d26/bdc3/0fcb/6c5ef34075e5fbf3557c8e06e0ec7b70.mp3";
audio.loop = true; audio.addEventListener("canplaythrough", function() { $(".yinyu").show(); console.log('musice loaded!') audio.play(); }, false); audio.load(); function audioplay(){ if(audio.paused){ audio.play(); }else{ audio.pause(); } } </script> </body> </html>
2.此方案參考: https://www.phpsong.com/1445.html
3.使用上述方法若無效，提供同事給的處理方法，我用的是微信那個方法，因為是在微信里的H5活動。
4.目前所得知的的音頻在微信的ios里播放有問題是ios的安全策略影響的
// 開始播放背景音樂
function audioAutoPlay(id) {
var audio = document.getElementById(id),
play = function () {
audio.play();
document.removeEventListener("touchstart", play, false);
};
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
play();
}, false);
document.addEventListener("touchstart", play, false);
}
audioAutoPlay('bgaudio');
//--創建頁面監聽，等待微信端頁面加載完畢 觸發音頻播放
document.addEventListener('DOMContentLoaded', function () {
function audioAutoPlay() {
var bgaudio = document.getElementById('bgaudio');
bgaudio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
bgaudio.play();
}, false);
}
audioAutoPlay();
});
//--創建觸摸監聽，當瀏覽器打開頁面時，觸摸屏幕觸發事件，進行音頻播放
document.addEventListener('touchstart', function () {
function audioAutoPlay() {
var bgaudio = document.getElementById('bgaudio');
bgaudio.play();
}
audioAutoPlay();
});