如何用js控制audio元素连续播放mp3文件

JavaScript06

如何用js控制audio元素连续播放mp3文件,第1张

1、首先我们先来看一下音频元素最基本的应用以及样式，如下图所示，运用audio元素即可,controls是用来控制是否显示控制条。

2、另外音频文件的格式也可以多样，如下图所示，也可以是ogg文件。

3、接下来我们来看一下音频元素的属性，上面创建的音频元素你发现它需要手动点击才能播放。如果你加了autoplay就会自动播放，如下图所示。

4、还有一个loop属性，是用来控制音频文件是否循环播放的，如下图所示。

5、接下来，preload属性是用来告诉音频文件是否预加载的，加上这个属性后。

6、最后要提醒的是src里面不仅可以写本地的文件，也可以写远程的文件地址，如下图所示。

第一段：

<embed src="等一分钟.mp3" id="aa">

<input type=button value=暂停 onclick="aa.pause()">

<input type=button value=播放 onclick="aa.play()">

第二段：

<audio id="aaa" src="等一分钟.mp3" autoplay controls></audio>

<input type=button value=暂停 onclick="aaa.pause()">

<input type=button value=播放 onclick="aaa.play()">

IE：支持第一段代码，不支持第二段代码

Firefox：支持第二段代码，第一段代码的第一行需要装插件，不支持第一段的后两行

Chrom：支持第二段代码，不支持第一段代码中的后两行

Opera，Safari：第一段代码的第一行需要装插件，不支持第一段的后两行，不支持第二段代码

这里我们可以使用JS来进行控制，代码如下：

var audio

window.onload = function(){

initAudio()

}

var initAudio = function(){

//audio = document.createElement("audio")

//audio.src='Never Say Good Bye.ogg'

audio = document.getElementById('audio')

}

function getCurrentTime(id){

alert(parseInt(audio.currentTime) + '：秒')

}

function playOrPaused(id,obj){

if(audio.paused){

audio.play()

obj.innerHTML='暂停'

return

}

audio.pause()

obj.innerHTML='播放'

}

function hideOrShowControls(id,obj){

if(audio.controls){

audio.removeAttribute('controls')

obj.innerHTML = '显示控制框'

return

}

audio.controls = 'controls'

obj.innerHTML = '隐藏控制框'

return

}

function vol(id,type , obj){

if(type == 'up'){

var volume = audio.volume + 0.1

if(volume >=1 ){

volume = 1

}

audio.volume = volume

}else if(type == 'down'){

var volume = audio.volume - 0.1

if(volume <=0 ){

volume = 0

}

audio.volume = volume

}

document.getElementById('nowVol').innerHTML = returnFloat1(audio.volume)

}

function muted(id,obj){

if(audio.muted){

audio.muted = false

obj.innerHTML = '开启静音'

}else{

audio.muted = true

obj.innerHTML = '关闭静音'

}

}

//保留一位小数点

function returnFloat1(value) {

value = Math.round(parseFloat(value) * 10) / 10

if (value.toString().indexOf(".") <0){

value = value.toString() + ".0"

}

return value