html5中 media（播放器）的api使用指南
程序员文章站
2023-12-04 10:25:16
这篇文章主要介绍了html5中 media（播放器）的api使用指南,需要的朋友可以参考下... 14-12-26...
直接奉上示例代码，废话就不多说了。
复制代码
代码如下:<!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;
}
推荐阅读
-
HTML5中5个简单实用的API（第二篇，含全屏、可见性、拍照、预加载、电池状态）
-
HTML5中5个简单实用的API
-
iOS中的音频服务和音频AVAudioPlayer音频播放器使用指南
-
html5中 media（播放器）的api使用指南
-
HTML5中的postMessage API基本使用教程
-
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
-
HTML5 Canvas API中drawImage()方法的使用实例
-
使用HTML5 Canvas API中的clip()方法裁剪区域图像
-
详解HTML5中的Communication API基本使用方法
-
HTML5中5个简单实用的API（第二篇，含全屏、可见性、拍照、预加载、电池状态）