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;
}
本文地址：https://www.stayed.cn/item/2508
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我
我的博客
人生若只如初见，何事秋风悲画扇。
我的标签
随笔档案
- 2024-02(2)
- 2023-06(1)
- 2023-05(1)
- 2023-04(14)
- 2023-03(3)
- 2023-01(6)
- 2022-12(5)
- 2022-11(5)
- 2022-07(2)
- 2022-06(4)
- 2022-05(3)
- 2022-03(1)
- 2021-12(6)
- 2021-11(1)
- 2021-10(3)
- 2021-09(5)
- 2021-07(5)
- 2021-02(2)
- 2021-01(7)
- 2020-12(18)
- 2020-11(14)
- 2020-10(12)
- 2020-09(10)
- 2020-08(22)
- 2020-07(2)
- 2020-06(1)
- 2020-04(5)
- 2020-03(9)
- 2020-02(7)
- 2020-01(9)
- 2019-12(8)
- 2019-11(10)
- 2019-10(11)
- 2019-09(17)
- 2019-08(16)
- 2019-07(6)
- 2019-06(3)
- 2019-04(1)
- 2019-03(8)
- 2019-02(5)
- 2019-01(1)
- 2018-11(2)
- 2018-10(3)
- 2018-09(1)
- 2018-08(3)
- 2018-07(3)
- 2018-06(7)
- 2018-04(4)
- 2018-03(5)
- 2018-02(4)
- 2018-01(22)
- 2017-12(3)
- 2017-11(5)
- 2017-10(15)
- 2017-09(26)
- 2017-08(1)
- 2017-07(3)