到这里一般都可以播放音乐了，如果还不行，很有可能是微信的限制。这时需要调用微信接口。
页面先引入：
然后JS写入微信事件：
document.addEventListener("WeixinJSBridgeReady",function(){
document.getElementById('music').play();
},false);
这样利用微信接口调用play()事件，可以完美解决ios音频无法autoplay的问题。
2.ios系统摇一摇播放音效事件无效
在实现摇晃（引用了封装好的shake.js）手机触发某一音效这个需求时，发现在微信中，音效没有被触发。后面找到原因：在ios里并没有把自定义摇晃事件shake当成交互动作。而要播放音效，需要用户有交互动作。没有交互，音效就没被加载，那么我们先加载音效，结合上面的微信接口：
document.addEventListener("WeixinJSBridgeReady",function(){
shakeMusic.load();
},false);
load()过之后，再调用play()即可听到音效。
3.ios系统不支持动画暂停样式（animation-play-state）
H5页面一般都会有BGM，也会提供一个旋转的音乐图标供用户开启关闭音乐。我们希望当用户点击音乐按钮时图标停止旋转，再点图标顺着之前停止的位置继续跑动画。animation-play-state是最简便的方式，然而，ios不支持。
目前的解决方案是：音乐图标负责跑动画，图标父级元素负责记录停止时的转动值。
html
sass
.music{
position:absolute;
width:rem(64px);
height:rem(64px);
top:rem(66px);
left:rem(15px);
z-index:1000;
img{
width:100%;
}
}
.musicRun{
-webkit-animation:music2.5sinfinitelinear0.5s;
animation:music2.5sinfinitelinear0.5s;
}
@-webkit-keyframesmusic{
0%{}
100%{
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
@keyframesmusic{
0%{}
100%{
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
JS
var$img=$('.musicImg')
varmusic=document.getElementById('music');
varisPlaying=false
running()
$img.on('click',function(){
!isPlaying?running():paused()
})
functionrunning(){
music.play();
$img.addClass('musicRun')
isPlaying=true
}
functionpaused(){
music.pause();
varsiteImg=$img.css('transform')//获取当前元素的动画改变，transform的值
varsiteWp=$('.music').css('transform')
$('.music').css('transform',siteWp==='none'?siteImg:siteImg.concat('',siteWp))
//由于父元素没有动画，所以每次赋值的时候，需要将上次父元素的状态加上
$img.removeClass('musicRun')
isPlaying=false
}