一個javascript寫的media player播放器

 界面較爲簡單，支持播放列表 。
建立播放列表的步驟爲：
1)在文本框中輸入媒體資源的地址，可以是HTTP地址，相對地址和絕對地址
2)點擊“添加到媒體列表”按鈕，將媒體資源信息放到媒體列表中
3)在媒體列表中，點擊“添加”鏈接，將媒體加入到播放列表中
4)重複若干遍，加入所有歌曲
5)點擊“播放選中的歌曲“，就開始播放 播放列表中的所有打勾的媒體文件

完整代碼如下：

<script language="JavaScript">...
    function el(objname)
    ...{
        return document.getElementById(objname);
    }
//增加一首歌到播放器列表，這樣，播放器放完一首歌之後，會繼續放下一首
function addmedia(url)
...{  
    // 取得當前的播放列表
    var playlist=Player.currentPlaylist;//新建一個指定URL的Media。
    var currMedia = Player.newMedia(url);
    //把新建的Media item添加到播放器列表
    playlist.appendItem(currMedia);
}

function clearlist()
...{                
    //Player.currentPlaylist.count返回列表中的歌曲數量
    while(Player.currentPlaylist.count>0) 
    ...{
        var item =Player.currentPlaylist.item(Player.currentPlaylist.count-1);
    Player.currentPlaylist.removeItem(item);                   //從播放列表中刪除項
    }           
}
//清空播放列表
function clearPlaylist()
...{                
    clearlist();
    
    var l_tb = el("tabPlayList");
    var row_len = l_tb.rows.length;
    for(var i = 0; i < row_len; i++)
        l_tb.firstChild.removeChild(l_tb.firstChild.childNodes[0]);          
}
//清空媒體列表
function clearMedialist()
...{                
    var l_tb = el("tabMediaList");
    var row_len = l_tb.rows.length;
    for(var i = 0; i < row_len; i++)
        l_tb.firstChild.removeChild(l_tb.firstChild.childNodes[0]);
}
//播放選中的歌曲
function addSeletedSongToPlayList()
...{
    clearlist();     
    var l_tb = el("tabPlayList");
    var row_len = l_tb.rows.length;
    if(row_len == 0)
    ...{
        //alert("無歌曲");
        return;
    }               
  for(var i=0;i<row_len;i++)
  ...{
      var check = l_tb.rows[i].cells[0].childNodes[0];
      var songname = l_tb.rows[i].cells[1].innerText;
      if(check.checked==true)
        ...{
            addmedia(songname);   
        }
    }
    
    SetPlayMode(el("setplay").options[el("setplay").selectedIndex].value)
    
    Player.controls.play();              //讓播放器開始播放
}

//添加文本輸入框中的url到播放列表
function addUrlToList()
...{
    //addmedia(document.getElementById("songURL").value );
    var l_tb = el("tabMediaList");
    var row_len = l_tb.rows.length;
    var tr = document.createElement("tr");
    var td = document.createElement("td");
    var strSong = el("songURL").value;
    var strHtml = strSong + "&nbsp;<a href='#' οnclick='addSong("" + strSong + "");'>添加</a>";
    strHtml += "&nbsp;<a href='#' οnclick='removeSong(this.parentElement.parentElement);'>移除</a>";
    td.innerHTML = strHtml;
    tr.appendChild(td);
    l_tb.firstChild.appendChild(tr);
    
    el("songURL").value = "http://";
}

//添加文本輸入框中的url到播放列表
function addSong(strSongName)
...{
    var l_tb = el("tabPlayList");
    var row_len = l_tb.rows.length;
    var tr = document.createElement("tr");
    
    var td = document.createElement("td");
    var strChecked = "<input type='checkbox' checked value='" + strSongName + "'>";
    td.innerHTML = strChecked;
    tr.appendChild(td);
    
    td = document.createElement("td");
    td.innerHTML = strSongName;
    tr.appendChild(td);
    
    td = document.createElement("td");
    var strHtml = "&nbsp;<a href='#' οnclick='removePlaySong(this.parentElement.parentElement);'>移除</a>";
    td.innerHTML = strHtml;
    tr.appendChild(td);
    
    l_tb.firstChild.appendChild(tr);
}

//從媒體列表刪除
function removeSong(tr)
...{
    var l_tb = el("tabMediaList");
    l_tb.firstChild.removeChild(tr);
}

//從播放列表刪除
function removePlaySong(tr)
...{
    var l_tb = el("tabPlayList");
    l_tb.firstChild.removeChild(tr);
}

//到指定位置播放
function playposition()
...{
    Player.controls.currentPosition = parseFloat(el("txtPosition").value);
    el("txtPosition").value = "1.0";
}

function StartMeUp()...{Player.controls.play()}
function ShutMeDown()...{Player.controls.stop()}
function Pause()...{Player.controls.pause()}
function Next()...{Player.controls.next()}
function Prev()...{Player.controls.previous()}
function Forward()...{Player.controls.fastForward()}
function reverse()...{Player.controls.fastReverse()}
function SetPlayMode(value)...{Player.settings.setMode(value,true)}
function ChangeuiMode(value)...{Player.uiMode=value;}
function AjustSound()...{
if(event.srcElement.name=="turnup" && Player.settings.volume<=100)
...{Player.settings.volume+=10}
if(event.srcElement.name=="turndown" && Player.settings.volume>=0)
...{Player.settings.volume-=10}
}
</script>

<SCRIPT LANGUAGE  = "JScript" FOR = "Player" EVENT = "MediaChange">...  
  el("spnCurrentMediaName").innerText = Player.currentMedia.name;
  el("spnCurrentMediaDuration").innerText = Player.currentMedia.durationString;
  el("spnCurrentMediaWidth").innerText = Player.currentMedia.imageSourceWidth;
  el("spnCurrentMediaHeight").innerText = Player.currentMedia.imageSourceHeight;
  el("spnCurrentMediaMarkerCount").innerText = Player.currentMedia.markerCount;
  el("spnCurrentSourceURL").innerText = Player.currentMedia.sourceURL;
</SCRIPT>

<object id="Player" width=300 height=300 classid="CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6">
                    <param name="URL" value="test.wmv">
                    <param name="autoStart" value="1">
                    <param name="balance" value="0">
                    <param name="baseURL" value>
                    <param name="captioningID" value>
                    <param name="currentPosition" value="0">
                    <param name="currentMarker" value="0">
                    <param name="defaultFrame" value="0">     
                    <param name="enabled" value="1">
                    <param name="enableErrorDialogs" value="0">
                    <param name="enableContextMenu" value="1">               
                    <param name="fullScreen" value="0">      
                    <param name="invokeURLs" value="1">
                    <param name="mute" value="0">
                    <param name="playCount" value="1">   
                    <param name="rate" value="1">
                    <param name="SAMIStyle" value>
                    <param name="SAMILang" value>
                    <param name="SAMIFilename" value>
                    <param name="stretchToFit" value="0">
                    <param name="uiMode" value="full">
                    <param name="volume" value="100">
                    <param name="windowlessVideo" value="0">
</object>
<br>
<INPUT TYPE="BUTTON" NAME="BtnPlay" VALUE="播放" OnClick="StartMeUp()">
<INPUT TYPE="BUTTON" NAME="BtnStop" VALUE="停止" OnClick="ShutMeDown()">
<input type="BUTTON" name="BtnPause" value="暫停" onClick="Pause()">
<label>
    <input name="turnup" type="button" id="turnup" value="+" onClick="AjustSound()">
    調節聲音
</label>
<input name="turndown" type="button" id="turndown" value="-" onClick="AjustSound()">
<br>
<input type="BUTTON" name="BtnNext" value="下一個" onClick="Next()">
<input type="BUTTON" name="BtnPrev" value="前一個" onClick="Prev()">
<INPUT TYPE="BUTTON" NAME="BtnForw" VALUE="快進" OnClick="Forward()">
<INPUT TYPE="BUTTON" NAME="BtnReve" VALUE="快退" OnClick="reverse()">
<br>
<label>播放模式</label>
<select id="setplay" name="setplay" onChange="SetPlayMode(this.options[this.selectedIndex].value)">
  <option value="loop" >循環播放</option>
  <option value="shuffle">隨機播放</option>
</select>
<label>顯示模式</label>
<select name="Changeui" onChange="ChangeuiMode(this.options[this.selectedIndex].value)">
  <option value="none">none</option>
  <option value="mini">mini</option>
  <option value="invisible">invisible</option>
  <option value="full" selected>full</option>
</select>
<br><br><br><br>
媒體列表:<br>
<div id = "divMediaList">
    <table id="tabMediaList">
    </table>
</div>
<br>
播放列表:<br>
<div id="divPlayList">
    <table id="tabPlayList">
    </table>
</div>
<br>
當前播放媒體信息:<br>
名稱:<span id="spnCurrentMediaName"></span><br>
長度:<span id="spnCurrentMediaDuration"></span>秒<br>
寬度:<span id="spnCurrentMediaWidth"></span>像素<br>
高度:<span id="spnCurrentMediaHeight"></span>像素<br>
標誌數:<span id="spnCurrentMediaMarkerCount"></span><br>
源地址:<span id="spnCurrentSourceURL"></span><br>
<br>
<br>
<INPUT TYPE = "BUTTON" ID = "play" Name="play" VALUE = "播放選中的歌曲" onClick = "addSeletedSongToPlayList();">
<INPUT TYPE = "BUTTON" ID = "clear" Name="clear" VALUE = "清空播放列表" onClick = "clearPlaylist();">
<INPUT TYPE = "BUTTON" ID = "clear" Name="clear" VALUE = "清空媒體列表" onClick = "clearMedialist();">
<br>
<input type="Text" name="songURL" value ="http://" size="33">
<INPUT TYPE = "BUTTON" ID = "add" Name="add" VALUE = "添加到媒體列表" onClick = "addUrlToList();">
<br>可輸入:1)HTTP地址: 如http://www.aaa.com/xxx.mp3
<br>2).相對位置: 如yyy.wmv
<br>3).絕對位置: 如file:///D:/bbb/zzz.wma
<br>
<br>
<input type="button" onclick="alert(Player.versionInfo);" value="播放器版本">
<input type="button" onclick="alert(Player.controls.currentPosition);" value="獲取當前位置">
跳到<input type="text" id="txtPosition" size="5" value="1.0">秒播放
<input type="button" onclick="playposition();" value="確定">

注意：該代碼僅能在IE下運行，系統必須安裝Windows Media Player

進入下載頁面
博客園下載地址:http://www.cnblogs.com/Files/redleaf1995/testwmp.rar