建立播放列表的步骤为:
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 + " <a href='#' onclick='addSong("" + strSong + "");'>添加</a>";
strHtml += " <a href='#' onclick='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 = " <a href='#' onclick='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 ="确定" >
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 + " <a href='#' onclick='addSong("" + strSong + "");'>添加</a>";
strHtml += " <a href='#' onclick='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 = " <a href='#' onclick='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://files.cnblogs.com/redleaf1995/testwmp.rar