移動(dòng)頁面的背景音樂播放
今年一年來做了大量的wap頁面有些項(xiàng)目就要提供音樂的播放功能啥寇，那么h5就提供了專屬的音樂播放標(biāo)簽audio，audio中有autoplay，loop半抱，preload的新屬性是最經(jīng)常用到內(nèi)容脓恕。
第一次寫的時(shí)候看到有這些新的屬性以為問題就能解決，功能就能實(shí)現(xiàn)×蓿現(xiàn)實(shí)告訴你不要太天真炼幔。
一般我們會(huì)每一頁的右上方位置放兩張音樂的狀態(tài)圖片，因此靜態(tài)頁面代碼如下：
<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>
當(dāng)然這個(gè)還是需要樣式的配合才能漂亮史简，因此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;
}
這個(gè)時(shí)候就會(huì)有人提出來這個(gè)肯定不能自動(dòng)循環(huán)播放乃秀，因?yàn)闆]有添加自動(dòng)循環(huán)播放的屬性 loop,哈哈是的這個(gè)時(shí)候是不能自動(dòng)循環(huán)播放
那我把loop加在audio標(biāo)簽里面，測(cè)試下看看圆兵，不錯(cuò)安卓這個(gè)功能實(shí)現(xiàn)了跺讯，再看看ios，咦殉农，什么原因部分ios沒有播放抬吟，怎么回事？
原來：ios 為了節(jié)省用戶流量统抬，對(duì)于 audio 和 video標(biāo)簽的 preload 和 autopaly 標(biāo)簽 會(huì)自動(dòng)攔截火本。。聪建。钙畔。
那怎么辦？
我用的jq金麸，引得是1.6的版本
$(function(){
var j=1;
if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) { ? ? ? ? ? ? ?//對(duì)ios系統(tǒng)進(jìn)行了半段
$('body').bind('touchstart',function() { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //只要滑動(dòng)就播放
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(){ ? ? ? ? ? ? ? ? ? ? ? ?//音樂循環(huán)
$('audio')[0].play();
});
})
這樣基本就把想要的效果實(shí)現(xiàn)擎析。還請(qǐng)大牛指正。挥下。揍魂。
參考
http://www.bubuko.com/infodetail-833618.html
