HTML5 audio標籤使用js進行播放控制實例_html5教學技巧

這裡我們可以用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 ;

}
volume = 1 ;

}
}
}
audio.volume = volume;
}else if(type == 'down'){
var volume = audio.volume - 0.1;
if(volume volume = 0 ;
}
audio.volume = volume;
}
document.getElementById('nowVol').innerHTML = returnFloat1(audio.volume);
} (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(".") value = value.toString() ".0";
} return value;

}

呼叫方式如下：

複製程式碼


程式碼如下:


取得播放時間

播放隱藏控制框開啟靜音音量 當前音量： -