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