移动页面的背景音乐播放
今年一年来做了大量的wap页面有些项目就要提供音乐的播放功能，那么h5就提供了专属的音乐播放标签audio，audio中有autoplay，loop，preload的新属性是最经常用到内容。
第一次写的时候看到有这些新的属性以为问题就能解决，功能就能实现。现实告诉你不要太天真。
一般我们会每一页的右上方位置放两张音乐的状态图片，因此静态页面代码如下：
<div class="music">
<span class="sakyMusic">
<img src="img_on.png" id="sakyMusicOn" class="spin" >
<img src="img_off.png" id="sakyMusicOff" >
<audio class="video1" autoplay preload="auto">
<source src="music.mp3" type="audio/mpeg">
</audio>
</span>
</div>
当然这个还是需要样式的配合才能漂亮，因此css样式如下
@-webkit-keyframes rotate {
0%,
100% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes rotate {
0%,
100% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.music {
position: fixed;
top: 13px;
right: 13px;
width: 31px;
height: 31px;
z-index: 99999;
}
.spin {
-moz-animation: rotate 4s linear infinite;
-webkit-animation: rotate 4s linear infinite;
-o-animation: rotate 4s linear infinite;
-ms-animation: rotate 4s linear infinite;
animation: rotate 4s linear infinite;
}
#sakyMusicOn {
display: block;
}
#sakyMusicOff {
display: none;
}
这个时候就会有人提出来这个肯定不能自动循环播放，因为没有添加自动循环播放的属性 loop,哈哈是的这个时候是不能自动循环播放
那我把loop加在audio标签里面，测试下看看，不错安卓这个功能实现了，再看看ios，咦，什么原因部分ios没有播放，怎么回事？
原来：ios 为了节省用户流量，对于 audio 和 video标签的 preload 和 autopaly 标签 会自动拦截。。。。
那怎么办？
我用的jq，引得是1.6的版本
$(function(){
var j=1;
if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) { //对ios系统进行了半段
$('body').bind('touchstart',function() { //只要滑动就播放
if ($('#sakyMusicOn').is(':visible')&&(j==1) ) { //防止每触下body音乐就重头播放
$('audio')[0].play();
$('#sakyMusicOff').hide();
$('#sakyMusicOn').show();
}
});
}
$('#sakyMusic').click(function(e){
e.preventDefault();
if ($('audio')[0].paused) {
alert(1)
$('audio')[0].play();
$('#sakyMusicOff').hide();
$('#sakyMusicOn').show();
} else {
alert(2)
$('audio')[0].pause();
$('#sakyMusicOff').show();
$('#sakyMusicOn').hide();
}
});
$('audio').bind('ended', function(){ //音乐循环
$('audio')[0].play();
});
})
这样基本就把想要的效果实现。还请大牛指正。。。
参考
http://www.bubuko.com/infodetail-833618.html
