一个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