解决微信页面加载自动播放音乐

项目中突然用到了这个功能，于是记录了下来
html:<audio style="display:none; height: 0" id="bg-music" preload="auto" src="${staticPath}/img/breakEgg/img/beijingyinyue.mp3" loop="loop"></audio>js：

//音乐自动播放
$(document).ready(function(){
autoPlayMusic();
audioAutoPlay();
});
function audioAutoPlay() {
var audio = document.getElementById('bg-music');
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
audio.play();
}, false);
}
// 音乐播放
function autoPlayMusic() {
// 自动播放音乐效果，解决浏览器或者APP自动播放问题
function musicInBrowserHandler() {
musicPlay(true);
document.body.removeEventListener('touchstart', musicInBrowserHandler);
}
document.body.addEventListener('touchstart', musicInBrowserHandler);
// 自动播放音乐效果，解决微信自动播放问题
function musicInWeixinHandler() {
musicPlay(true);
document.addEventListener("WeixinJSBridgeReady", function () {
musicPlay(true);
}, false);
document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
}
document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
}
function musicPlay(isPlay) {
var media = document.querySelector('#bg-music');
if (isPlay && media.paused) {
media.play();
}
if (!isPlay && !media.paused) {
media.pause();
}
}

旋转音乐按钮html: <div class="music">
<i class="icon-music open" num="1" style="background-image: url(${staticPath}/img/breakEgg/img/icon-muisc.png);"></i>
<i class="music-span" style="background-image: url(${staticPath}/img/breakEgg/img/music-span.png);"></i>
</div>
开始结束音乐js: $(".music").click(function(){
if($(".icon-music").attr("num") == "1"){
$(".icon-music").removeClass("open");
$(".icon-music").attr("num","2")
$(".music-span").css("display","none");
document.getElementById("bg-music").pause();//关闭音乐
setTimeout(musicHide,2000);
}else{
$(".icon-music").attr("num","1");
$(".icon-music").addClass("open");
$(".music-span").css("display","block");
document.getElementById("bg-music").play();//开启音乐
setTimeout(musicHide,2000);
}

});