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

更新时间:2023-04-06 15:02:27 阅读：评论：0

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

复制代码代码如下:

<!doctype html>

<html lang=”en”>

<head>

<meta chart=”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>

<ction>

<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>

</ction>

<ction>

<h2>controls</h2>

<button id=”play”>play</button>

<button id=”pau”>pau</button>

<button id=”get_paud”>getpaud</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_eking”>geteking</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_ekable”>getekable</button>

</ction>

</article>

<aside>

<ction>

<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>

</ction>

<ction>

<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>paud:</td>

<td id=”paud”></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>

</ction>

<ction>

<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>ekable:</td>

<td id=”ekable”></td>

</tr>

<tr>

<td>played:</td>

<td id=”played”></td>

</tr>

<tr>

<td>error:</td>

<td id=”error”></td>

</tr>

</table>

</ction>

</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”);

};

// pau()

document.getelementbyid(“pau”).onclick=function(){

audio.pau();

console.log(“pau”);

};

// get paud

document.getelementbyid(“get_paud”).onclick=function(){

console.log(“audio.paud: “+audio.paud);

};

// get ended

document.getelementbyid(“get_ended”).onclick=function(){

console.log(“audio.ended: “+audio.ended);

};

// t volume-

document.getelementbyid(“volume_down”).onclick=function(){

audio.volume-=0.2;

console.log(“volume-0.2”);

};

// t 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);

};

// t src_music1

document.getelementbyid(“play_music1”).onclick=function(){

audio.src=”./media/music1.mp3″;

updatesrc();

updatecurrentsrc();

console.log(“play music1”);

};

// t src_music2

document.getelementbyid(“play_music2”).onclick=function(){

audio.src=”./media/music2.mp3″;

updatesrc();

updatecurrentsrc();

console.log(“play music2”);

};

// t 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 eking

document.getelementbyid(“get_eking”).onclick=function(){

console.log(“audio.eking: “+audio.eking);

};

// t 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<n;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=fal;

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=fal;

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.getelemcertificationentbyid(“loop_off”).onclick=function(){

audio.loop=fal;

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=fal;

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.default本科和大专的区别playbackrate);

};

// t playbackrate-

document.getelementbyid(“playback_rate_down”).onclick=function(){

audio.playbackrate-=0.2;

console.log(“playbackrate-0.2”);

};

// t 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<n;i++){

console.log(“(“+ranges.start(i)+”,”+ranges.end(i)+”)”);

}

};

// get ekable

document.getelementbyid(“get_ekable”).onclick=function(){

console.log(“audio.ekable:”);

var ranges=audio.ekable;

var n=ranges.length;

for(var i=0;i<n;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();

updateduratio长方体和正方体的认识pptn();

updatepaud();

updatenetworkstate();

updatereadystate();

updatebuffered();

updateekable();

updateplayed();

console.log(“event:emptied”);

});

// ended

audio.addeventlistener(“ended”,function(){

updateended();

console.log(“event:ended”);

});

// loadeddata

audio.addeventlistener(“loadeddata”,function(){

updatenetworkstate();

updatereadystate();

updatebuffered();

updateekable();

console.log(“event:loadeddata”);

});

// loadedmetadata

audio.addeventlistener(“loadedmetadata”,function(){

console.log(“event:loadedmetadata”);

});

// loadstart

audio.addeventlistener(“loadstart”,function(){

console.log(“event:loadstart”);

});

// pau

audio.addeventlistener(“pau”,function(){

updatepaud();

console.log(“event:pau”);

});

// play

audio.addeventlistener(“play”,function(){

updatepaud();

console.log(“event:play”);

});

// playing

audio.addeventlistener(“playing”,function(){

console.log(“event:playing”);

});

// progress

audio.addeventlistener(“progress”,function(){

updatenetworkstate();

updatereadystate();

updatebuffered();

updateekable();

console.log(“event:progress”);

});

// ratechange

audio.addeventlistener(“ratechange”,function(){

updateplaybackrate();

console.log(“event:ratechange”);

});

// eked

audio.addeventlistener(“eked”,function(){

console.log(“event:eked”);

});

// eking

audio.addeventlistener(“eking”,function(){

console.log(“event:eking”);

});

// 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”);

});

// v战胜命运的孩子阅读答案olumechange

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();

updatepaud();

updatemuted();

updateended();

updateplaybackrate();

updatenetworkstate();

updatereadystate();

updatebuffered();

updateekable();

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;

}

// paud

function updatepaud(){

document.getelementbyid(“paud”).innerhtml=audio.paud;

}

// 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<n;i++){

str+=”(“+ranges.start(i)+”,”+ranges.end(i)+”)”;

if(i!=n-1){

str+=”

“;

}

}

document.getelementbyid(“buffered”).innerhtml=str;

}

// ekable

function updateekable(){

var ranges=audio.ekable;

var str=””;

var n=ranges.length;

for(var i=0;i<n;i++){

str+=”(“+ranges.start(i)+”,”+ranges.end(i)+”)”;

if(i!=n-1){

str+=”

“;

}

}

document.getelementbyid(“ekable”).innerhtml=str;

}

// played

function updateplayed(){

var ranges=audio.played;

var str=””;

var n=ranges.length;

for(var i=0;i<n;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;

}