html5中 media（播放器）的api使用指南

直接奉上示例代码，废话就不多说了。

复制代码代码如下:
!doctyPE htML>
html lang="en">
head>
meta charset="UTF-8">
tITle> HTML Audio API/title>
link rel="stylesheet" href="./style/main.css" />
script src="./script/audio-controls.js"> /script>
/head>
body>
header>
h1> HTML5 Audio API/h1>
p> HTML5 Audio API demo by a href="a href="http://github.COM/LearnShare"> http://github.com/LearnShare/a> " target="_blank"> LearnShare/a> ./p>
p>
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
/p>
p>
View code on a href="a href="http://github.com/LearnShare/LearnShare.github.io/tree/master/labs/audio/"> http://github.com/LearnShare/LearnShare.github.io/tree/master/labs/audio//a> " target="_blank"> LearnShare.github.io/a> .
API reference: a href="a href="https://developer.mozilla.org/zh-CN/docs/DOM/HTMLMediaElement"> https://developer.mozilla.org/zh-CN/docs/DOM/HTMLMediaElement/a> " target="_blank"> HTMLMediaElement/a> and a href="a href="http://www.w3schools.com/tags/ref_av_dom.asp"> http://www.w3schools.com/tags/ref_av_dom.asp/a> " target="_blank"> Audio/Video DOM References/a>
/p>
/header>
article>
section>
h2> Audio Element/h2>
audio id="audio" src="./media/music1.mP3" controls="controls"> /audio>
p> Open the strong> developer tool/strong> to view console LOGs./p>
/section>
section>
h2> Controls/h2>
button id="play"> play/button>
button id="pause"> pause/button>
button id="get_paused"> getPaused/button>
button id="get_ended"> getEnded/button>


button id="volume_down"> volume-/button>
button id="volume_up"> volume+/button>
button id="get_volume"> getVolume/button>


button id="get_src"> getSrc/button>
button id="play_music1"> playMusic1/button>
button id="play_music2"> playMusic2/button>
button id="remove_music"> removeMusic/button>
button id="get_current_src"> getCurrentSrc/button>


button id="get_initial_time"> getInitialTime/button>
button id="get_duration"> getDuration/button>
button id="get_seeking"> getSeeking/button>
button id="jump_to"> jumpTo_30s/button>
button id="get_current_time"> getCurrentTime/button>
button id="get_played"> getPlayed/button>


button id="autoplay_on"> autoplay_on/button>
button id="autoplay_off"> autoplay_off/button>
button id="get_autoplay"> getAutoplay/button>


button id="controls_show"> controls_show/button>
button id="controls_hide"> controls_hide/button>
button id="get_controls"> getControls/button>


button id="loop_on"> loop_on/button>
button id="loop_off"> loop_off/button>
button id="get_loop"> getLoop/button>


button id="PReload_metadata"> preload_metadata/button>
button id="get_preload"> getPreload/button>


button id="get_default_muted"> getDefaultMuted/button>
button id="mute"> mute/button>
button id="unmute"> unmute/button>
button id="get_muted"> getMuted/button>


button id="get_default_playback_rate"> getDefaultPlaybackRate/button>
button id="playback_rate_down"> playbackRate-/button>
button id="playback_rate_up"> playbackRate+/button>
button id="get_playback_rate"> getPlaybackRate/button>


button id="get_network_state"> getNetworkState/button>
button id="get_ready_state"> getReadyState/button>
button id="get_buffered"> getBuffered/button>
button id="get_seekable"> getSeekable/button>
/section>
/article>
aside>
section>
h3> player Attrs/h3>
table>
tr>
td> autoplay:/td>
td id="autoplay"> /td>
/tr>
tr>
td> controls:/td>
td id="controls"> /td>
/tr>
tr>
td> defaultMuted:/td>
td id="default_muted"> /td>
/tr>
tr>
td> defaultPlaybackRate:/td>
td id="default_playback_rate"> /td>
/tr>
tr>
td> loop:/td>
td id="loop"> /td>
/tr>
tr>
td> preload:/td>
td id="preload"> /td>
/tr>
/table>
/section>
section>
h3> Player Info/h3>
table>
tr>
td> src:/td>
td id="src"> /td>
/tr>
tr>
td> currentSrc:/td>
td id="current_src"> /td>
/tr>
tr>
td> duration:/td>
td id="duration"> /td>
/tr>
tr>
td> currentTime:/td>
td id="current_time"> /td>
/tr>
tr>
td> ended:/td>
td id="ended"> /td>
/tr>
tr>
td> paused:/td>
td id="paused"> /td>
/tr>
tr>
td> muted:/td>
td id="muted"> /td>
/tr>
tr>
td> volume:/td>
td id="volume"> /td>
/tr>
tr>
td> playbackRate:/td>
td id="playback_rate"> /td>
/tr>
/table>
/section>
section>
h3> Play status/h3>
table>
tr>
td> networkState:/td>
td id="network_state"> /td>
/tr>
tr>
td> readyState:/td>
td id="ready_state"> /td>
/tr>
tr>
td> buffered:/td>
td id="buffered"> /td>
/tr>
tr>
td> seekable:/td>
td id="seekable"> /td>
/tr>
tr>
td> played:/td>
td id="played"> /td>
/tr>
tr>
td> error:/td>
td id="error"> /td>
/tr>
/table>
/section>
/aside>
/body>
/html>

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; in; 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; in; 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; in; 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; in; 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; in; 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; in; 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;
}

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！