Home  >  Article  >  Web Front-end  >  API usage guide for media (player) in html5_html5 tutorial skills

API usage guide for media (player) in html5_html5 tutorial skills

WBOY
WBOYOriginal
2016-05-16 15:46:561805browse

I’ll just provide you with the sample code, so I won’t go into too much nonsense.


Copy code
The code is as follows:





HTML Audio API





HTML5 Audio API


HTML5 Audio API demo by http://github.com/LearnShare" target="_blank">LearnShare.



Last update @2013-04-23 20:40:00
add info table
update @2013-04-22 14:54:00
add DOM events
update @2013-04-22 12:47:00
add getCurrentSrc button



View code on http://github.com/LearnShare/LearnShare.github.io/tree/master/labs/audio/" target="_blank">LearnShare.github.io.
API reference: https://developer.mozilla.org/zh-CN/docs/DOM/HTMLMediaElement" target="_blank">HTMLMediaElement and http://www.w3schools.com/tags/ref_av_dom.asp" target="_blank">Audio/Video DOM References





Audio Element



Open the developer tool to view console logs.




Controls




































































audio-controls.js


复制代码
代码如下:

window.onload=function(){
// get autio element
var audio=document.getElementById("audio");
// play()
document.getElementById("play").onclick=function(){
audio.play();
console.log("play");
};
// pause()
document.getElementById("pause").onclick=function(){
audio.pause();
console.log("pause");
};
// get paused
document.getElementById("get_paused").onclick=function(){
console.log("audio.paused: " audio.paused);
};
// get ended
document.getElementById("get_ended").onclick=function(){
console.log("audio.ended: " audio.ended);
};
// set volume-
document.getElementById("volume_down").onclick=function(){
audio.volume-=0.2;
console.log("volume-0.2");
};
// set volume
document.getElementById("volume_up").onclick=function(){
audio.volume =0.2;
console.log("volume 0.2");
};
// get volume
document.getElementById("get_volume").onclick=function(){
console.log("audio.volume: " audio.volume);
};
// get src
document.getElementById("get_src").onclick=function(){
console.log("audio.src: " audio.src);
};
// set src_music1
document.getElementById("play_music1").onclick=function(){
audio.src="./media/music1.mp3";
updateSrc();
updateCurrentSrc();
console.log("play music1");
};
// set src_music2
document.getElementById("play_music2").onclick=function(){
audio.src="./media/music2.mp3";
updateSrc();
updateCurrentSrc();
console.log("play music2");
};
// set remove_music
document.getElementById("remove_music").onclick=function(){
audio.src="";
console.log("remove music");
};
// get currentSrc
document.getElementById("get_current_src").onclick=function(){
console.log("audio.currentSrc: " audio.currentSrc);
};
// get initialTime
document.getElementById("get_initial_time").onclick=function(){
console.log("audio.initialTime: " audio.initialTime);
};
// get duration
document.getElementById("get_duration").onclick=function(){
console.log("audio.duration: " audio.duration);
};
// get seeking
document.getElementById("get_seeking").onclick=function(){
console.log("audio.seeking: " audio.seeking);
};
// set currentTime
document.getElementById("jump_to").onclick=function(){
audio.currentTime=30;
console.log("jumpTo 30s");
};
// get currentTime
document.getElementById("get_current_time").onclick=function(){
console.log("audio.currentTime: " audio.currentTime);
};
// get played
document.getElementById("get_played").onclick=function(){
console.log("audio.played:");
var ranges=audio.played;
var n=ranges.length;
for(var i=0;i console.log("(" ranges.start(i) "," ranges.end(i) ")");
}
};
// autoplay on
document.getElementById("autoplay_on").onclick=function(){
audio.autoplay=true;
updateAutoplay();
console.log("autoplay on");
};
// autoplay off
document.getElementById("autoplay_off").onclick=function(){
audio.autoplay=false;
updateAutoplay();
console.log("autoplay off");
};
// get autoplay
document.getElementById("get_autoplay").onclick=function(){
console.log("audio.autoplay: " audio.autoplay);
};
// controls show
document.getElementById("controls_show").onclick=function(){
audio.controls=true;
updateControls();
console.log("controls show");
};
// controls hide
document.getElementById("controls_hide").onclick=function(){
audio.controls=false;
updateControls();
console.log("controls hide");
};
// get controls
document.getElementById("get_controls").onclick=function(){
console.log("audio.controls: " audio.controls);
};
// loop on
document.getElementById("loop_on").onclick=function(){
audio.loop=true;
updateLoop();
console.log("loop on");
};
// loop off
document.getElementById("loop_off").onclick=function(){
audio.loop=false;
updateLoop();
console.log("loop off");
};
// get loop
document.getElementById("get_loop").onclick=function(){
console.log("audio.loop: " audio.loop);
};
// preload metadata
document.getElementById("preload_metadata").onclick=function(){
audio.preload="metadata";
updatePreload();
console.log("preload metadata");
};
// get preload
document.getElementById("get_preload").onclick=function(){
console.log("audio.preload: " audio.preload);
};
// get defaultMuted
document.getElementById("get_default_muted").onclick=function(){
console.log("audio.defaultMuted: " audio.defaultMuted);
};
// mute
document.getElementById("mute").onclick=function(){
audio.muted=true;
updateMuted();
console.log("audio mute");
};
// unmute
document.getElementById("unmute").onclick=function(){
audio.muted=false;
updateMuted();
console.log("audio unmute");
};
// get muted
document.getElementById("get_muted").onclick=function(){
console.log("audio.muted: " audio.muted);
};
// get defaultPlaybackRate
document.getElementById("get_default_playback_rate").onclick=function(){
console.log("audio.defaultPlaybackRate: " audio.defaultPlaybackRate);
};
// set playbackRate-
document.getElementById("playback_rate_down").onclick=function(){
audio.playbackRate-=0.2;
console.log("playbackRate-0.2");
};
// set playbackRate
document.getElementById("playback_rate_up").onclick=function(){
audio.playbackRate =0.2;
console.log("playbackRate 0.2");
};
// get playbackRate
document.getElementById("get_playback_rate").onclick=function(){
console.log("audio.playbackRate: " audio.playbackRate);
};
// get networkState
document.getElementById("get_network_state").onclick=function(){
console.log("audio.networkState: " audio.networkState);
};
// get readyState
document.getElementById("get_ready_state").onclick=function(){
console.log("audio.readyState: " audio.readyState);
};
// get buffered
document.getElementById("get_buffered").onclick=function(){
console.log("audio.buffered:");
var ranges=audio.buffered;
var n=ranges.length;
for(var i=0;i console.log("(" ranges.start(i) "," ranges.end(i) ")");
}
};
// get seekable
document.getElementById("get_seekable").onclick=function(){
console.log("audio.seekable:");
var ranges=audio.seekable;
var n=ranges.length;
for(var i=0;i console.log("(" ranges.start(i) "," ranges.end(i) ")");
}
};

// DOM events

// abort
audio.addEventListener("abort",function(){
console.log("event:abort");
});
// canplay
audio.addEventListener("canplay",function(){
console.log("event:canplay");
});
// canplaythrough
audio.addEventListener("canplaythrough",function(){
console.log("event:canplaythrough");
});
// durationchange
audio.addEventListener("durationchange",function(){
updateDuration();
console.log("event:durationchange");
});
// emptied
audio.addEventListener("emptied",function(){
updateSrc();
updateCurrentSrc();
updateDuration();
updatePaused();
updateNetworkState();
updateReadyState();
updateBuffered();
updateSeekable();
updatePlayed();
console.log("event:emptied");
});
// ended
audio.addEventListener("ended",function(){
updateEnded();
console.log("event:ended");
});
// loadeddata
audio.addEventListener("loadeddata",function(){
updateNetworkState();
updateReadyState();
updateBuffered();
updateSeekable();
console.log("event:loadeddata");
});
// loadedmetadata
audio.addEventListener("loadedmetadata",function(){
console.log("event:loadedmetadata");
});
// loadstart
audio.addEventListener("loadstart",function(){
console.log("event:loadstart");
});
// pause
audio.addEventListener("pause",function(){
updatePaused();
console.log("event:pause");
});
// play
audio.addEventListener("play",function(){
updatePaused();
console.log("event:play");
});
// playing
audio.addEventListener("playing",function(){
console.log("event:playing");
});
// progress
audio.addEventListener("progress",function(){
updateNetworkState();
updateReadyState();
updateBuffered();
updateSeekable();
console.log("event:progress");
});
// ratechange
audio.addEventListener("ratechange",function(){
updatePlaybackRate();
console.log("event:ratechange");
});
// seeked
audio.addEventListener("seeked",function(){
console.log("event:seeked");
});
// seeking
audio.addEventListener("seeking",function(){
console.log("event:seeking");
});
// stalled
audio.addEventListener("stalled",function(){
console.log("event:stalled");
});
// suspend
audio.addEventListener("suspend",function(){
console.log("event:suspend");
});
// timeupdate
audio.addEventListener("timeupdate",function(){
updateCurrentTime();
updateEnded();
updatePlayed();
console.log("event:timeupdate");
});
// volumechange
audio.addEventListener("volumechange",function(){
updateVolume();
console.log("event:volumechange");
});
// waiting
audio.addEventListener("waiting",function(){
console.log("event:waiting");
});
updateAutoplay();
updateControls();
updateDefaultMuted();
updateDefaultPlaybackRate();
updateLoop();
updatePreload();
updateSrc();
updateCurrentSrc();
updateDuration();
updateCurrentTime();
updateVolume();
updatePaused();
updateMuted();
updateEnded();
updatePlaybackRate();
updateNetworkState();
updateReadyState();
updateBuffered();
updateSeekable();
updatePlayed();
updateError();
};
// functions to update info table
// autoplay
function updateAutoplay(){
document.getElementById("autoplay").innerHTML=audio.autoplay;
}
// controls
function updateControls(){
document.getElementById("controls").innerHTML=audio.controls;
}
// defaultMuted
function updateDefaultMuted(){
document.getElementById("default_muted").innerHTML=audio.defaultMuted;
}
// defaultPlaybackRate
function updateDefaultPlaybackRate(){
document.getElementById("default_playback_rate").innerHTML=audio.defaultPlaybackRate;
}
// loop
function updateLoop(){
document.getElementById("loop").innerHTML=audio.loop;
}
// preload
function updatePreload(){
document.getElementById("preload").innerHTML=audio.preload;
}
// src
function updateSrc(){
document.getElementById("src").innerHTML=audio.src;
}
// currentSrc
function updateCurrentSrc(){
document.getElementById("current_src").innerHTML=audio.currentSrc;
}
// duration
function updateDuration(){
document.getElementById("duration").innerHTML=audio.duration;
}
// currentTime
function updateCurrentTime(){
document.getElementById("current_time").innerHTML=audio.currentTime;
}
// ended
function updateEnded(){
document.getElementById("ended").innerHTML=audio.ended;
}
// paused
function updatePaused(){
document.getElementById("paused").innerHTML=audio.paused;
}
// muted
function updateMuted(){
document.getElementById("muted").innerHTML=audio.muted;
}
// volume
function updateVolume(){
document.getElementById("volume").innerHTML=audio.volume;
}
// playbackRate
function updatePlaybackRate(){
document.getElementById("playback_rate").innerHTML=audio.playbackRate;
}
// networkState
function updateNetworkState(){
document.getElementById("network_state").innerHTML=audio.networkState;
}
// readyState
function updateReadyState(){
document.getElementById("ready_state").innerHTML=audio.readyState;
}
// buffered
function updateBuffered(){
var ranges=audio.buffered;
var str="";
var n=ranges.length;
for(var i=0;i str ="(" ranges.start(i) "," ranges.end(i) ")";
if(i!=n-1){
str ="
";
}
}
document.getElementById("buffered").innerHTML=str;
}
// seekable
function updateSeekable(){
var ranges=audio.seekable;
var str="";
var n=ranges.length;
for(var i=0;i str ="(" ranges.start(i) "," ranges.end(i) ")";
if(i!=n-1){
str ="
";
}
}
document.getElementById("seekable").innerHTML=str;
}
// played
function updatePlayed(){
var ranges=audio.played;
var str="";
var n=ranges.length;
for(var i=0;i str ="(" ranges.start(i) "," ranges.end(i) ")";
if(i!=n-1){
str ="
";
}
}
document.getElementById("played").innerHTML=str;
}
// error
function updateError(){
document.getElementById("error").innerHTML=audio.error;
}
Statement:
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