项目中问题解决杂谈audio

插件fullpage下html会被重新打包。audio播放不能。比较好的解决方案是在$.fn.fullpage({ 后加

afterRender: function(){ 在这加入播放启动  }，

而或许你会遇到新的问题。IOS下audio不能默认播放。这就比较烦了。这个原本我以为ios默认浏览器的问题。然后我发现ios下微信也是一样的。

我在微信下解决方案

audioAutoPlay('bgMusic');
function audioAutoPlay(id){
var audio = document.getElementById(id);
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
audio.play();
}, false);
}

function audionoPlay(id){
var audio = document.getElementById(id);
audio.pause();
document.addEventListener("WeixinJSBridgeReady", function () {
audio.pause();
}, false);
}

最后需求可能更多的是能可开关的播放

var off = true；

afterRender: function(){
$('.mscBtn').click(function(){
off=!off;
if(off){
$("#audioBtn").removeClass("play");
audionoPlay('bgMusic');
}else{
$("#audioBtn").addClass("play");
audioAutoPlay('bgMusic');
}
})
},

播放按钮可以用c3做旋转效果 通过class名 play

@-webkit-keyframes spin{
0% {-webkit-transform: rotateZ(0deg);}
100% { -webkit-transform: rotateZ(360deg);}}

.play{-webkit-animation: 2.3s spin linear infinite;}

当然audio的坑不止这些。我只是突然想到以前遇到的算是挺麻烦的问题。后期想到再补充吧