利用HTML5JS有没有办法实现快速循环播放?

html-css017

利用HTML5JS有没有办法实现快速循环播放?,第1张

<audio>的接口里有声音播放速度的接口,但是多浏览器支持没有做过测试,楼主小心使用。

myVid=document.getElementsByTag("audio")

myVid.playbackRate=4//大于1,就是高速播放

当然,如果是声音里面有衰减或空白的部分,不想剪辑声音的话,可以用多个Audio同时循环播放,如下:

var audios=[]

for (var i= 0i <5i++ ) {

var a = new Audio()

a.src = "" //填入你的音频地址

a.preload="auto"

a.loop = true

audios.push(a)

}

// 调用下面函数之前需要先确定audio已经完全载入,可以通过audio的readystate接口进行判断。

//这里直接就写成立即执行的方式了。

(function playSingle(i){

//用递归写的,迭代也可行

if ( i >0 ) {

audios[i-1].play()

setTimeout(function(){

playSingle(i-1)

},1000)//每隔1000毫秒,额外播放一个音频

}

})(audios.length)

最后共五个音频先后循环播放,各延迟1000毫秒。当然可以通过调节毫秒数来达到更好的效果。

HTML5中音频循环播放的属性是loop

<!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>

<audio controls="controls" loop="loop">

 <source src="song.ogg" type="audio/ogg" />

 <source src="song.mp3" type="audio/mpeg" />

Your browser does not support the audio element.

</audio>

loop 属性规定当音频结束后将重新开始播放。如果设置该属性,则音频将循环播放。

语法:<audio loop="loop" />