Home > Web Front-end > H5 Tutorial > HTML5 audio tag uses js for playback control example_html5 tutorial skills

HTML5 audio tag uses js for playback control example_html5 tutorial skills

WBOY
Release: 2016-05-16 15:46:55
Original
1826 people have browsed it

The

Here we can use JS to control, the code is as follows:

Copy the code
The code is as follows:

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) ': seconds');
}

function playOrPaused(id,obj){
if(audio.paused){
audio. play();
obj.innerHTML='pause';
return;
}
audio.pause();
obj.innerHTML='play';
}

function hideOrShowControls(id,obj){
if(audio.controls){
audio.removeAttribute('controls');
obj.innerHTML = 'Show control box'
return ;
}
audio.controls = 'controls';
obj.innerHTML = 'Hide control box'
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 = 'Turn on mute';
}else{
audio. muted = true;
obj.innerHTML = 'Turn off mute';
}
}
//Retain one decimal point

function returnFloat1(value) {
value = Math.round(parseFloat(value) * 10) / 10;
if (value.toString().indexOf(".") < 0){
value = value.toString() ".0" ;
}
return value;
}

The calling method is as follows:


Copy code
The code is as follows:

Get play time
Play
Hide control box< ;/a>
Turn on mute
Volume
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template