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();
});