HTML+JS的音频播放器
Web 上的音频直到现在，仍然不存在一项旨在网页上播放音频的标准。今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 audio 元素来包含音频的标准方法。audio 元素能够播放声音文件或者音频流。
<audio src="song.mp3" controls="controls">
</audio>
试着用audio 与 windows media 编写一个多浏览器支持的音频播放器：
Html：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>WavPlayer</title>
<meta name="Author" content="">
<meta name="Keywords" content="">
<link href="public.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="WAVplayer_html5.js"></script>
</head>
<body>
<style>
.WavPlayer{391px;height:66px;background:url(pbg.jpg) 0 0 no-repeat;display:none;}
.WavPlayer .PlayerBtn{67px;height:45px;display:inline;float:left;margin:10px 0 0 10px;}
.WavPlayer .PlayerBtn span{display:block;cursor:pointer;67px;height:45px;background:url(play.jpg) 0 0 no-repeat;}
.WavPlayer .PlayerBtn span.on{background:url(pause.jpg) 0 0 no-repeat;}
.WavPlayer .bar{178px;height:9px;display:inline;float:left;padding:3px 0px 1px 0px;background:url(bar.jpg) 0 0 no-repeat;margin:26px 0 0 6px;position:relative;cursor:pointer;}
.WavPlayer .leftBar{height:9px;4px;display:inline;float:left;}
.WavPlayer .onPlay .leftBar{background:url(l.gif) top right no-repeat;}
.WavPlayer .rightBar{height:9px;3px;display:inline;float:left;}
.WavPlayer .onPlay .rightBar{background:url(r.gif) 0 0 no-repeat;}
.WavPlayer .playBar{height:9px;0;display:inline;float:left;background:url(m.gif) 0 0 repeat-x;}
.WavPlayer .playTime{display:inline;float:left;margin:24px 0 0 8px;font-size:13px;38px;overflow:hidden;}
.WavPlayer .downLoad{66px;height:47px;display:inline;float:left;background:url(down.jpg) 0 0 no-repeat;margin:9px 0 0 6px;}
.loadPlayer{display:block;margin:20px auto 0;}
</style>
<div id="WavPlayer" style="391px;height:66px;"></div>
<div id="loadStatus" ></div>
<script>
theWavPlayer({id:'WavPlayer',url:'11.mp3'});
</script>
</body>
</html>
WAVplayer_html5.js ：
function WavPlayer(obj){
var node = this;
node.id = obj.id;
node.url = obj.url;
node.downLoad = obj.downLoad || false; //下载按钮绑定方法
node.box = $('#'+obj.id);
node.html = '<img src="012.gif" class="loadPlayer" id="'+node.id+'_loading"/><div class="WavPlayer" id="'+node.id+'_Player"><div class="PlayerBtn"><span></span></div><div class="bar"><div class="leftBar"></div><div class="playBar"></div><div class="rightBar"></div></div><div class="playTime">00:00</div> <a class="downLoad" id="'+node.id+'_downLoad" href="javascript:;" ></a></div>';//播放器HTML结构
node.playType = !!(document.createElement('audio').canPlayType); //判断是否支持 audio
}
WavPlayer.prototype={
play:function(){
var node = this;
node.box.html(node.html);
node.loading = $('#'+node.id+'_loading');
node.player = $('#'+node.id+'_Player');
node.btn = node.player.find('.PlayerBtn span');
node.playTime = node.player.find('.playTime');
node.bar = node.player.find('.bar');
node.playBar = node.bar.find('.playBar');
node.leftBar = node.bar.find('.leftBar');
node.rightBar = node.bar.find('.rightBar');
node.type = true ;
if (node.downLoad)
{
$('#'+node.id+'_downLoad').click(function(){node.downLoad();});
}
if(!node.playType){ //不支持audio的则用windows Media
var MediaHtml = '<div style="visibility:hidden;"><object ';
if($.browser.msie){
MediaHtml +=' classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" ';
}
else{
MediaHtml +=' type="application/x-ms-wmp" ';
}
MediaHtml +=' id="'+node.id+'_Media" ><param name="URL" value="'+node.url+'" /><param name="rate" value="1" /><param name="balance" value="0" /><param name="currentPosition" value="0" /><param name="playCount" value="1" /><param name="autoStart" value="0" /><param name="currentMarker" value="0" /><param name="invokeURLs" value="-1" /><param name="volume" value="50" /><param name="mute" value="0" /><param name="stretchToFit" value="0" /><param name="windowlessVideo" value="0" /><param name="enabled" value="-1" /><param name="enableContextMenu" value="-1" /><param name="fullScreen" value="0" /> <param name="enableErrorDialogs" value="-1" /></object></div>';
node.MediaBox=$(MediaHtml).insertAfter(node.box);
node.Media = document.getElementById(node.id+'_Media');
node.timer = setInterval(function(){node.IEplayerSet();},200);
if($.browser.opera){
node.loading.hide();
node.MediaBox.css('visibility','visible');
}
}
else{
node.hide = $('<div style="display:none;"></div>').insertAfter(node.box);
node.MediaPlay = $('<audio src="'+node.url+'" controls="controls"></audio>').appendTo(node.hide);
node.Media = node.MediaPlay[0];
node.MediaPlay.bind("canplaythrough", function(){
if(node.type){
node.loading.hide();
node.player.show();
node.playerSet();
node.type = false;
}
});
}
},
IEplayerSet:function(){
var node = this;
switch(node.Media.playState)
{
case 10:
{
if(node.type){
node.loading.hide();
node.MediaBox.css('visibility','hidden');
node.btn.click(function(){
node.playerBtn(this);
});
node.player.show();
node.barWidth = node.bar.width()-node.leftBar.width()-node.rightBar.width();
node.bar.click(function(e){
if(node.Media.playState == 3) {
var offset = node.bar.offset(),
mX = e.clientX,
nowWidth = e.clientX - offset.left - node.leftBar.width();
nowWidth = nowWidth<0?0 : nowWidth>node.barWidth?node.barWidth : nowWidth;
var nowTime = node.duration * nowWidth / node.barWidth;
node.playBar.width(nowWidth);
node.Media.controls.currentPosition = nowTime;
}
});
node.type = false;
}
}
break;
case 3:
{
node.playTime.html(node.Media.controls.currentPositionString);
node.NowTime = node.Media.controls.currentPosition;
node.duration = node.Media.currentMedia.duration;
node.playbar();
}
break;
case 1:
{
node.playTime.html('00:00');
node.btn.attr('class','');
node.bar.attr('class','bar');
node.playBar.width('0');
}
break;
default:
{
}
}
},
playerSet:function(){
var node = this;
node.duration = node.Media.duration;
node.barWidth = node.bar.width()-node.leftBar.width()-node.rightBar.width();
node.btn.click(function(){
node.playerBtn(this);
});
node.MediaPlay.bind("ended", function(){
node.Media.currentTime = 0;
node.btn.attr('class','');
node.Media.pause();
;
});
node.MediaPlay.bind("timeupdate", function(){
node.NowTime = node.Media.currentTime;
node.playTime.html(node.timeChange(node.NowTime));
node.playbar();
});
node.bar.click(function(e){
if(!node.Media.paused) {
node.setBar(e);
}
});
},
playerBtn:function(tag){
var node = this,tagNode = $(tag);
if (tagNode.attr('class') == 'on'){
tagNode.attr('class','');
if(!node.playType){
node.Media.controls.pause();
}
else{
node.Media.pause();
}
}
else{
tagNode.attr('class','on');
if(!node.playType){
node.Media.controls.play();
}
else{
node.Media.play();
}
}
},
timeChange:function(n){
var num = Math.round(n),
t1 = Math.floor(num/60),
t2 = num%60,
timer = t1 < 10 ? '0'+ t1 : t1;
timer += ":";
timer += t2 < 10 ? '0'+ t2 : t2;
return timer;
},
playbar:function(){
var node = this;
if (node.NowTime == 0)
{
node.bar.attr('class','bar');
node.playBar.width('0');
}
else{
var nowWidth = node.barWidth * node.NowTime / node.duration;
node.bar.attr('class','bar onPlay');
node.playBar.width(nowWidth);
}
},
setBar:function(e){
var node=this,
offset = node.bar.offset(),
mX = e.clientX,
nowWidth = e.clientX - offset.left - node.leftBar.width();
nowWidth = nowWidth<0?0 : nowWidth>node.barWidth?node.barWidth : nowWidth;
var nowTime = node.duration * nowWidth / node.barWidth;
if(!node.playType){
node.playBar.width(nowWidth);
node.Media.controls.currentPosition = nowTime;
}
else{
node.Media.currentTime = nowTime;
}
}
};
function theWavPlayer(obj){
if ( obj.id != undefined && obj.url != undefined )
{
var newWavPlayer = new WavPlayer(obj);
newWavPlayer.play();
}
}
最后测试 IE7+,Firefox,Chrome可以正常播放MP3文件。