HTML5中音頻循環(huán)播放的屬性是loop
成都創(chuàng)新互聯(lián)公司作為成都網(wǎng)站建設(shè)公司,專注網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì),有關(guān)企業(yè)網(wǎng)站設(shè)計(jì)方案、改版、費(fèi)用等問題,行業(yè)涉及報(bào)廢汽車回收等多個領(lǐng)域,已為上千家企業(yè)服務(wù),得到了客戶的尊重與認(rèn)可。
!DOCTYPE?html
html
head
meta?charset="utf-8"
title/title
/head
body
audio?src="music/心形宇宙.m4a"?controls="controls"?loop="loop"?autoplay="autoplay"/audio
/body
/html
在HTML5 新特性中,audio 、video 是我們比較關(guān)心的 新 元素,我們終于可以脫離 Flash ,來開發(fā)音頻、視頻播放器了,對于 一個HTML 新元素,無非就是 屬性、事件 、方法等等,關(guān)于audio 的具體的屬性、事件 、方法,請谷歌。
下面是JQUERY:
$('#btn-loop').click(function() {
console.log("Player.currentIndex :", Player.currentIndex);
Player.audio.onended = function() {
Player.audio.load();
Player.audio.play();
};
});
audio的接口里有聲音播放速度的接口,但是多瀏覽器支持沒有做過測試,樓主小心使用。
myVid=document.getElementsByTag("audio");
myVid.playbackRate=4;//大于1,就是高速播放
當(dāng)然,如果是聲音里面有衰減或空白的部分,不想剪輯聲音的話,可以用多個Audio同時循環(huán)播放,如下:
var audios=[];
for (var i= 0; i 5; i++ ) {
var a = new Audio();
a.src = "" ;//填入你的音頻地址
a.preload="auto";
a.loop = true;
audios.push(a) ;
}
// 調(diào)用下面函數(shù)之前需要先確定audio已經(jīng)完全載入,可以通過audio的readystate接口進(jìn)行判斷。
//這里直接就寫成立即執(zhí)行的方式了。
(function playSingle(i){
//用遞歸寫的,迭代也可行
if ( i 0 ) {
audios[i-1].play() ;
setTimeout(function(){
playSingle(i-1) ;
},1000);//每隔1000毫秒,額外播放一個音頻
}
})(audios.length) ;
最后共五個音頻先后循環(huán)播放,各延遲1000毫秒。當(dāng)然可以通過調(diào)節(jié)毫秒數(shù)來達(dá)到更好的效果。