1、windows Media Player：（ie专用）
| 属性/方法名： | 说明： |
| URL:String; | 指定媒体位置，本机或网络地址 |
| uiMode:String; | 播放器界面模式，可为Full, Mini, None, Invisible |
| playState:integer; | 播放状态，1=停止，2=暂停，3=播放，6=正在缓冲，9=正在连接，10=准备就绪 |
| enableContextMenu:Boolean; | 启用/禁用右键菜单 |
| fullScreen:boolean; | 是否全屏显示 |
| [controls] | wmp.controls //播放器基本控制 |
| controls.play; | 播放 |
| controls.pause; | 暂停 |
| controls.stop; | 停止 |
| controls.currentPosition:double; | 当前进度 |
| controls.currentPositionString:string; | 当前进度，字符串格式。如“00:23” |
| controls.fastForward; | 快进 |
| controls.fastReverse; | 快退 |
| controls.next; | 下一曲 |
| controls.previous; | 上一曲 |
| [settings] | wmp.settings //播放器基本设置 |
| settings.volume:integer; | 音量，0-100 |
| settings.autoStart:Boolean; | 是否自动播放 |
| settings.mute:Boolean; | 是否静音 |
| settings.playCount:integer; | 播放次数 |
| [currentMedia] | wmp.currentMedia //当前媒体属性 |
| currentMedia.duration:double; | 媒体总长度 |
| currentMedia.durationString:string; | 媒体总长度，字符串格式。如“03:24” |
| currentMedia.getItemInfo(const string); | 获取当前媒体信息"Title"=媒体标题，"Author"=艺术家，"Copyright"=版权信息，"Description"=媒体内容描述，"Duration"=持续时间（秒），"FileSize"=文件大小，"FileType"=文件类型，"sourceURL"=原始地址 |
| currentMedia.setItemInfo(const string); | 通过属性名设置媒体信息 |
| currentMedia.name:string; | 同 currentMedia.getItemInfo("Title") |
| [currentPlaylist] | wmp.currentPlaylist //当前播放列表属性 |
| currentPlaylist.count:integer; | 当前播放列表所包含媒体数 |
| currentPlaylist.Item[integer]; | 获取或设置指定项目媒体信息，其子属性同wmp.currentMedia |
问题一：播放后（axWindowsMediaPlayer1.currentMedia.duration）无法及时获取播放文件的总时间
方案：使用 axWindowsMediaPlayer1.newMedia(URL).duration （获取的是总的毫秒数，url为播放文件的路径。）
一个小例子：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {padding:0px;margin:0px;font-size:12px;color:#333;font-family:"微软雅黑"}
.fl {float:left}
.clearfix:after {content: "."; display: block; height: 0!important; line-height: 0; font-size: 0; overflow: hidden; visibility: hidden; clear: both; }
.clearfix {*zoom: 1; *display: table; }
.player_box {border:1px solid #0094ff;300px;background-color:#e1e1e1;margin:10px;padding:10px;}
.btn {background-color:#0094ff;color:#fff;margin-right:10px;50px;display:block;float:left;text-align:center;height:22px;line-height:22px;cursor:pointer}
.jd_duration {180px;background-color:#cdcdcd;height:15px;position:relative;cursor:pointer;}
.jd {background-color:#0094ff;height:15px;}
.jp-current-time,.jp-duration {position:absolute;top:16px;}
.jp-current-time {left:0px;}
.jp-duration {right:0px;}
.dn {display:none;}
</style>
<script src="js/jquery-1.8.3.js"></script>
<script>
//载入播放控件
function LoadMusicControls() {
var playBox = document.getElementById("playBox");
var str = "";
str += "";
str += "<OBJECT id="WindowsMediaPlayer" height="0" width="0" classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" style="position:relative;left:0px; top:0px;0px;height:0px;" class="musicojb">";
str += "<PARAM NAME="url" VALUE="">";
str += "<PARAM NAME="rate" VALUE="1">";
str += "<PARAM NAME="balance" VALUE="0">";
str += "<PARAM NAME="currentPosition" VALUE="0">";
str += "<PARAM NAME="defaultFrame" VALUE="">";
str += "<PARAM NAME="playCount" VALUE="1">";
str += "<PARAM NAME="autoStart" VALUE="0">";
str += "<PARAM NAME="currentMarker" VALUE="0">";
str += "<PARAM NAME="invokeURLs" VALUE="0">";
str += "<PARAM NAME="baseURL" VALUE="">";
str += "<PARAM NAME="volume" VALUE="100">";
str += "<PARAM NAME="mute" VALUE="-1">";
str += "<PARAM NAME="uiMode" VALUE="none">";
str += "<PARAM NAME="stretchToFit" VALUE="-1">";
str += "<PARAM NAME="windowlessVideo" VALUE="0">";
str += "<PARAM NAME="enabled" VALUE="-1">";
str += "<PARAM NAME="enableContextMenu" VALUE="-1">";
str += "<PARAM NAME="fullScreen" VALUE="0">";
str += "<PARAM NAME="SAMIStyle" VALUE="">";
str += "<PARAM NAME="SAMILang" VALUE="">";
str += "<PARAM NAME="SAMIFilename" VALUE="">";
str += "<PARAM NAME="captioningID" VALUE="">";
str += "<PARAM NAME="enableErrorDialogs" VALUE="0">";
str += "<PARAM name="SendPlayStateChangeEvents" value="0">";
str += "<PARAM name="SendOpenStateChangeEvents" value="0">";
str += "<PARAM NAME="_cx" VALUE="5080">";
str += "<PARAM NAME="_cy" VALUE="5080">";
str += "</OBJECT>";
playBox.innerHTML = str;
}
window.onload = function () {
//加载播放控件
LoadMusicControls();
var oWindowsMediaPlayer = document.getElementById("WindowsMediaPlayer");
var oControls = $(oWindowsMediaPlayer).find("");
var oPlay = document.getElementById("play");
var oPause = document.getElementById("pause");
var oStop = document.getElementById("stop");
var oSeekBar = document.getElementById("seekBar"), oSeekBarW = oSeekBar.offsetWidth;
var oPlayBar = document.getElementById("playBar"); //进度条
var oCurrentTime = document.getElementById("currentTime");
var oDurationTime = document.getElementById("durationTime");
// oWindowsMediaPlayer.controls.currentPosition 当前播放进度 时间
// oWindowsMediaPlayer.currentMedia.duration 总播放长度 时间
//play
//alert(oWindowsMediaPlayer.newMedia("ILovedYou.wav").duration)
var jd = null;
oPlay.onclick = function () {
var songName = "ILovedYou.wav"; //歌曲路径
this.style.display = "none";
oPause.style.display = "block";
if (!oWindowsMediaPlayer.URL) {
oWindowsMediaPlayer.URL = songName;
};
oWindowsMediaPlayer.controls.play();
//显示进度和时间
jd = setInterval(function () {
//如果播放开始
if (oWindowsMediaPlayer.controls.currentPositionString) {
oCurrentTime.innerHTML = oWindowsMediaPlayer.controls.currentPositionString;
oDurationTime.innerHTML = oWindowsMediaPlayer.currentMedia.durationString;
//进度条
var nowJd = oWindowsMediaPlayer.controls.currentPosition;
var nowLen = oWindowsMediaPlayer.currentMedia.duration;
oPlayBar.style.width = Math.ceil(parseInt(nowJd * 10000 / nowLen, 10) * oSeekBarW / 10000) + "px";
//如果播放结束
//alert(oWindowsMediaPlayer.controls.currentPosition)
if ((oWindowsMediaPlayer.currentMedia.duration - oWindowsMediaPlayer.controls.currentPosition) * 100000 < 1) {
oWindowsMediaPlayer.controls.stop();
oCurrentTime.innerHTML = "00:00";
oPlayBar.style.width = "0px";
oPlay.style.display = "block";
oPause.style.display = "none";
clearInterval(jd);
}
}
}, 10)
//手动控制进度
oSeekBar.onclick = function (event) {
var event = window.event || event;
var iLeft = window.event.offsetX;
oPlayBar.style.width = iLeft + "px";
oWindowsMediaPlayer.controls.currentPosition = Math.ceil((iLeft / oSeekBarW) * 10000) * oWindowsMediaPlayer.currentMedia.duration / 10000;
oCurrentTime.innerHTML = oWindowsMediaPlayer.controls.currentPositionString;
};
};
//oPause
oPause.onclick = function () {
this.style.display = "none";
oPlay.style.display = "block";
if (oWindowsMediaPlayer.controls.isavailable('pause')) {
oWindowsMediaPlayer.controls.pause();
};
clearInterval(jd);
};
//stop
oStop.onclick = function () {
if (oWindowsMediaPlayer.controls.isavailable('stop')) {
oWindowsMediaPlayer.controls.stop();
};
oPlay.style.display = "block";
oPause.style.display = "none";
//进度条
oPlayBar.style.width = 0;
clearInterval(jd);
oCurrentTime.innerHTML = "00:00";
oSeekBar.onclick = null;
};
}
</script>
</head>
<body>
<div id="playBox" style="display:none"></div>
<div class="player_box clearfix">
<div class="fl">
<span class="btn play_btn" id="play">play</span>
<span class="btn oPause_btn dn" id="pause">pause</span>
<span class="btn stop_btn" id="stop">stop</span>
</div>
<div class="jd_duration fl" id="seekBar">
<div class="jd" id="playBar" style="0px;"></div>
<div class="jp-current-time" id="currentTime">00:00</div>
<div class="jp-duration" id="durationTime">00:00</div>
</div>
</div>
</body>
</html>
2、jPlayer（官方地址：http://www.jplayer.org/）
一个jquery插件，官方网站上有具体的使用方法。易上手。
支持格式：
- HTML5: mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav
- Flash: mp3, mp4 (AAC/H.264), rtmp, flv
参考：http://www.blueidea.com/tech/web/2006/3494.asp