html5中 media(播放器)的api使用指南

作者:佚名     字体:[增加 减小]    类型:转载
这篇文章主要介绍了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;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=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<n;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<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();
  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<n;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<n;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<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;
}