插件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的坑不止这些。我只是突然想到以前遇到的算是挺麻烦的问题。后期想到再补充吧