js控制MediaPlayer播放器循环播放

没想过要用这个东西,但群里有人问,这个地址也是群里的朋友贴出来的,仔细想想这个东西也有应用的场景,比如歌词的控制。能够得到播放时间,就能够控制歌词的显示了。估计那些用JS做的播放器大致都是这样的吧?猜测而已

内容如下:http://roln.cn/archives/80

<!–播放器 开始–>
<object id=”Exobud” style=”width: 273px; height: 64px” type=”application/x-oleobject”
classid=”CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6″>
<param name=”URL” value=”"/>
<param name=”rate” value=”1″/>
<param name=”balance” value=”0″/>
<param name=”currentPosition” value=”0″/>
<param name=”defaultFrame” value=”"/>
<param name=”playCount” value=”1″/>
<param name=”autoStart” value=”-1″/>
<param name=”currentMarker” value=”0″/>
<param name=”invokeURLs” value=”-1″/>
<param name=”baseURL” value=”"/>
<param name=”volume” value=”80″/>
<param name=”mute” value=”0″/>
<param name=”uiMode” value=”full”/>
<param name=”stretchToFit” value=”-1″/>
<param name=”windowlessVideo” value=”0″/>
<param name=”enabled” value=”-1″/>
<param name=”enableContextMenu” value=”0″/>
<param name=”fullScreen” value=”0″/>
<param name=”SAMIStyle” value=”"/>
<param name=”SAMILang” value=”"/>
<param name=”SAMIFilename” value=”"/>
<param name=”captioningID” value=”"/>
<param name=”enableErrorDialogs” value=”0″/>
<param name=”_cx” value=”7223″/>
<param name=”_cy” value=”1693″/>
</object> <!–播放器 结束–>
1 单项播放很简单,这里粗略的说一下
通过网页传参在后台cs页面绑定一个变量
html
<param name=”URL” value=”<% = Url%>”/>
cs
public string Url;
Url = 从数据库中读取
2 让播放器播放多首歌曲并循环播放呢
思路就是建一个播放列表,然后通过js来控件.

第一种方法 (此方法最终行不通)
建立一个数组相当于播放列表alist(假设这是用户选择歌曲后的结果)

js
var num = 0
function Onload(){
var Exobud = document.getElementById(”Exobud”);
Exobud.URL = alist[num];
Exobud.controls.play();
num ++;
}
通过PlayStateChange监听播放状态 ,8表示播放结束
<script for=”Exobud” EVENT=”PlayStateChange(stats)”>
if(stats == 8 )
Exobud.URL = alist[num];
Exobud.controls.play();
//alert(Exobud.URL);
num ++
</script>
到此播放正常,当播放下一首歌的时候就定住了.非要手动去点播放.不知道是何原因?
在网上查,有一仁兄弟好像解决过这问题,说是放第二首歌的时候,仍然是在第一首歌的播放状态下,所以就一直是停的.
解决办法,就是每首歌只播放一次,但不知道改那里.播放器参数中每首歌是设的播放一次.
另一种办法就是加一个alert(Exobud.URL);这样就可以自动播放,但总弄个弹窗不好吧.
到现在还没弄明白是么回事.如有人知道请留言跟贴,帮我解决一哈.
第二种方法.现已解决.能正常使用. 思路就是用setTimeout()不停的循环,然后控件播放列表的索引得到值来改变URL

先建立一个播放列表
假设用户所选的歌曲参数已传过来
播放列表如下
<select name=”SongList” size=”5″ >
OnDblClick=”player();”>
<option value=”songs/001.mp3″>001</option>
<option value=”songs/002.wma”>002</option>
<option value=”songs/003.WMV”>003</option>
<option value=”songs/004.mp3″>004</option>
<option value=”songs/005.wma”>005</option>
</select>
同时设置几个按钮
<a href=”#” onclick=”javascript:play();”>on</a>
<a href=”#” onclick=”javascript:Last_OneOK();”>last</a>
<a href=”#” onclick=”javascript:Next_OneOK();”>next</a>

js
<script language=”JavaScript”>
//var server=’http://localhost/music/’;
var SongList = document.getElementById(”SongList”);
var Exobud = document.getElementById(”Exobud”);
var TotalSongs = SongList.options.length;
function play()
{
SongList.options[0].selected=true;
player();
}
function player(){
if(SongList.selectedIndex < 0) alert(’系统错误,请选择您要播放的曲目!’);
else{
var url;
url = SongList.options[SongList.selectedIndex].value;
Exobud.URL=url;
//alert(TotalSongs);
Exobud.controls.play();
showTLab();
return;
}
}

function showTLab(){
if(Exobud.playState == 1)
Next_OneOK();
setTimeout(”showTLab()”, 1000);
}

function Next_OneOK(){
if(SongList.selectedIndex >= 0){
if(SongList.selectedIndex < TotalSongs-1){
SongList.options[SongList.selectedIndex + 1].selected = true;
player();
}else{
SongList.options[0].selected = true;
player();
}
}
}
function Last_OneOK(){
if((SongList.selectedIndex > 0) && (SongList.selectedIndex < TotalSongs)){
SongList.options[SongList.selectedIndex - 1].selected = true;
player();
}
}
</script>

这样问题就解决了.
注音乐文件都是我本地的

附上media player的一些控制方法

player.controls.play(); 播放
player.controls.stop(); 停止
player.controls.pause(); 暂停
player.controls.currentPosition 返回播放文件的当前时间位置(以秒为单位)
player.controls.currentPositionString 时间格式的字符串 “0:32″
player.currentMedia.duration 返回播放文件的总长度(以秒为单位)
player.currentMedia.durationString 时间格式的字符串 “4:34″
player.settings.volume 音量 (0-100)
player.settings.balance 声道,通过它应该可以进行立体声、左声道、右声道的控制。但对应的取值尚不清楚。
player.settings.mute = s 静音(s取值为true和false)
player.closedCaption.CaptioningID 网页中出现字幕的容器的ID
player.closedCaption.SAMIFileName 字幕文件地址
player.playState 返回播放器状态( 3:正在播放,2:暂停1:已停止)


相关内容: 网页音乐播放器

function get( lyrics ){

var l= lyrics;

var reg_soundname =/\[ti:(.+?)\]/i;

var reg_singer=/\[ar:(.+?)\]/i;

var reg_CD =/\[al:(.+?)\]/i;

var reg_maker =/\[(by:.+?)\]/i;

var arr_soundname = l.match(reg_soundname);
var arr_singer = l.match(reg_singer);
var arr_CD= l.match(reg_CD);
var arr_maker = l.match(reg_maker);

var info= " ";
if (arr_soundname != null)
{
info += ":" + arr_soundname[1] + " ";
}
if (arr_singer != null)
{
info += ":" + arr_singer[1] + " ";
}
if (arr_CD != null)
{
info += ":" + arr_CD[1] + " ";
}
if (arr_maker != null)
{
info += arr_maker[1] + " ";
}

var reg_take =/\[\d\d:\d\d\.\d\d\]*(\s)*(\S)+/g; //

var arr_lyrics = l.match(reg_take);

var reg_replacetime =/(\[\d\d:\d\d\.\d\d\])+/g;

var reg_gettimes =/(\[\d\d:\d\d\.\d\d\])/g;
var reg_readtime =/\[(\d\d):(\d\d\.\d\d)\]/;

var reg_dis =/ $/;

var arr_splitedLyrics = new Array();

var arr_info = [0, info];
arr_splitedLyrics.push(arr_info);
for ( ly= 0; ly < arr_lyrics.length; ly++)
{

var arr_tmptime= arr_lyrics[ly].match(reg_gettimes);

// alert("arr_lyrics[ly]="+arr_lyrics[ly]);
// alert("arr_tmptime="+arr_tmptime);
var lyy = arr_lyrics[ly].replace(reg_replacetime, "");

for ( i= 0; i < arr_tmptime.length; i++)
{

var arr_single= new Array();

var t = arr_tmptime[i];
// alert("t="+t);
var min = t.substring(1,3);

var sec = t.substring(4,t.length-1);
//alert("sec="+sec);
var time = Number(min) * 60 + Number(sec);
// alert("time="+time);
arr_single[0] = time;

// if (!reg_dis.test(lyy))
// {
// lyy += " ";
// }
arr_single[1] = lyy;

arr_splitedLyrics.push(arr_single);
}

arr_splitedLyrics.sort(function(a, b){
return a[0]-b[0];
}
;
}

return arr_splitedLyrics;
}

function get( lyrics ){

var l= lyrics;

var reg_soundname =/\[ti:(.+?)\]/i;

var reg_singer=/\[ar:(.+?)\]/i;

var reg_CD =/\[al:(.+?)\]/i;

var reg_maker =/\[(by:.+?)\]/i;

var arr_soundname = l.match(reg_soundname);
var arr_singer = l.match(reg_singer);
var arr_CD= l.match(reg_CD);
var arr_maker = l.match(reg_maker);

var info= " ";
if (arr_soundname != null)
{
info += ":" + arr_soundname[1] + " ";
}
if (arr_singer != null)
{
info += ":" + arr_singer[1] + " ";
}
if (arr_CD != null)
{
info += ":" + arr_CD[1] + " ";
}
if (arr_maker != null)
{
info += arr_maker[1] + " ";
}

var reg_take =/\[\d\d:\d\d\.\d\d\]*(\s)*(\S)+/g; //

var arr_lyrics = l.match(reg_take);

var reg_replacetime =/(\[\d\d:\d\d\.\d\d\])+/g;

var reg_gettimes =/(\[\d\d:\d\d\.\d\d\])/g;
var reg_readtime =/\[(\d\d):(\d\d\.\d\d)\]/;

var reg_dis =/ $/;

var arr_splitedLyrics = new Array();

var arr_info = [0, info];
arr_splitedLyrics.push(arr_info);
for ( ly= 0; ly < arr_lyrics.length; ly++)
{

var arr_tmptime= arr_lyrics[ly].match(reg_gettimes);

// alert("arr_lyrics[ly]="+arr_lyrics[ly]);
// alert("arr_tmptime="+arr_tmptime);
var lyy = arr_lyrics[ly].replace(reg_replacetime, "");

for ( i= 0; i < arr_tmptime.length; i++)
{

var arr_single= new Array();

var t = arr_tmptime[i];
// alert("t="+t);
var min = t.substring(1,3);

var sec = t.substring(4,t.length-1);
//alert("sec="+sec);
var time = Number(min) * 60 + Number(sec);
// alert("time="+time);
arr_single[0] = time;

// if (!reg_dis.test(lyy))
// {
// lyy += " ";
// }
arr_single[1] = lyy;

arr_splitedLyrics.push(arr_single);
}

arr_splitedLyrics.sort(function(a, b){
return a[0]-b[0];
}
);
}

return arr_splitedLyrics;
}

html代码

<script type="text/javascript" src="tt.js"></script>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="uft8.js"></script>

<div align="center">

<object classid = "clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" id="player" width = "250" height = "200">
<param name = "url" value = "冰雨.mp3" target="_blank" >参数 url 定义播放媒体的路径。
<!--是否自动播放-->
<param NAME="Balance" VALUE="0"> <SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
<!--调整左右声道平衡,同上面旧播放器代码-->
<param name="enabled" value="-1">
<!--播放器是否可人为控制-->
<param NAME="EnableContextMenu" VALUE="-1">
<param name="defaultFrame" value="2">
<PARAM NAME="AutoStart" value="-1">
<param name="SAMIFilename" value="ll">
<param name="ShowStatusBar" value="0">
</object>
</div>
<div>
<a href="#" id="next" >下一首歌</a>
<a href="#" id="p">上一首歌</a>
<input type="checkbox" id="ck">循环播放
时间 <input type="text" id="playerinfo">
</div>

<!--显示歌词-->
<div id="geci">

</div>
<a href="#" id="showLs" >查看歌曲</a>
<div>
<select name="select1" size="5" id="s" >
<option value="1" selected > 朋友</option>
<option value="2" > 你好吗</option>
</select>
</div>

<div id="lcdiv">
<select name="ly" size="10" id="lc">
</select>
</div>

<script type="text/javascript">
player.closedCaption.SAMIFileName = "C:\\3.smi";
var num=0;//控制歌曲的下标
</SCRIPT>
//监听播放器的事件
<SCRIPT event="playStateChange(star)" for="player" LANGUAGE="JScript">
//当播放下一首时同步播放列表的歌曲名

if( star==8 ){

num=num+1;

if(num>=s.options.length){num=0}
s.options[num].selected=true;
}

</SCRIPT>

<SCRIPT FOR = player EVENT = buffering(Start)>

if(Start==false){ setInterval(updatetime() ,1000);}

</SCRIPT>

<script type="text/javascript">
//显示播放时间
setInterval(updatetime,1000);
function updatetime()
{
$("#playerinfo").val( player.controls.currentPositionString + " | " + player.currentMedia.durationString);
}
//监听循环的次数
$("#ck").click(function (){

if(ck.checked==true){
player.settings.setMode("loop",true)

}else{

player.settings.setMode("loop",false)
}

});
//播放用户从播放列表中选中的歌曲
$("#s").click(function (){

num=this.selectedIndex;
player.controls.playItem(player.currentPlaylist.item(num));

});

//播放下一首歌
$("#next").click( function (){

player.controls.next();
num=num+1;
if(num>=s.options.length){num=0;
player.controls.playItem(player.currentPlaylist.item(num));
}
s.options[num].selected=true;

});

//播放上一首歌
$("#p").click( function (){
num=num-1;
if(num<0){
num=s.options.length-1;
player.controls.playItem(player.currentPlaylist.item(num));

}
s.options[num].selected=true;

});

//生成歌词的数组(从隐藏域中提取歌词的字符串)
$("#geci").hide();
$("#lcdiv").hide();
var ly="";
var arr_lyrics;
var j=0;
$("#showLs").click(function (){
var html = $.ajax({
url:"http://localhost:8080/music/lyrics.html",
async: false
}).responseText;

$("#geci").html(html);
arr_lyrics=get($("#geci").html());
for( i=0;i<arr_lyrics.length;i++){
ly+="<option >"+arr_lyrics[i][1]+"</option>";

}
ly=ly.substring(2,ly.length);

$("#lc").html(ly);

$("#lc").attr({size:arr_lyrics.length});

$("#lcdiv").show("slow");
setInterval(playLyrics,3000);

});

//歌词与歌曲的同步

function playLyrics (){
var playTime= player.controls.currentPositionString;

var min =playTime.substring(0,2);

var sec = playTime.substring(3,playTime.length);

var p_time = Number(min) * 60 + Number(sec);

for(i=0;i<lc.options.size-1;i++ ){

if( p_time>= arr_lyrics[i][0]&&p_time<arr_lyrics[i+1][0]){
j=i;

break;

}

}

lc.options[j].selected=true;
alert(parseInt(lc.style.top)-1);

};
</script>

<script type="text/javascript" src="tt.js"></script>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="uft8.js"></script>

<div align="center">

<object classid = "clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" id="player" width = "250" height = "200">
<param name = "url" value = "冰雨.mp3" target="_blank" >参数 url 定义播放媒体的路径。
<!--是否自动播放-->
<param NAME="Balance" VALUE="0"> <SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
<!--调整左右声道平衡,同上面旧播放器代码-->
<param name="enabled" value="-1">
<!--播放器是否可人为控制-->
<param NAME="EnableContextMenu" VALUE="-1">
<param name="defaultFrame" value="2">
<PARAM NAME="AutoStart" value="-1">
<param name="SAMIFilename" value="ll">
<param name="ShowStatusBar" value="0">

</object>

</div>
<div>
<a href="#" id="next" >下一首歌</a>
<a href="#" id="p">上一首歌</a>
<input type="checkbox" id="ck">循环播放
时间 <input type="text" id="playerinfo">
</div>

<!--显示歌词-->
<div id="geci">

</div>
<a href="#" id="showLs" >查看歌曲</a>
<div>
<select name="select1" size="5" id="s" >
<option value="1" selected > 朋友</option>
<option value="2" > 你好吗</option>
</select>
</div>

<div id="lcdiv">
<select name="ly" size="10" id="lc">
</select>
</div>

<script type="text/javascript">
player.closedCaption.SAMIFileName = "C:\\3.smi";
var num=0;//控制歌曲的下标
</SCRIPT>
//监听播放器的事件
<SCRIPT event="playStateChange(star)" for="player" LANGUAGE="JScript">
//当播放下一首时同步播放列表的歌曲名

if( star==8 ){

num=num+1;

if(num>=s.options.length){num=0}
s.options[num].selected=true;
}

</SCRIPT>

<SCRIPT FOR = player EVENT = buffering(Start)>

if(Start==false){ setInterval(updatetime() ,1000);}

</SCRIPT>

<script type="text/javascript">

//显示播放时间
setInterval(updatetime,1000);
function updatetime()
{
$("#playerinfo").val( player.controls.currentPositionString + " | " + player.currentMedia.durationString);
}
//监听循环的次数
$("#ck").click(function (){

if(ck.checked==true){
player.settings.setMode("loop",true)

}else{

player.settings.setMode("loop",false)
}

});
//播放用户从播放列表中选中的歌曲
$("#s").click(function (){

num=this.selectedIndex;
player.controls.playItem(player.currentPlaylist.item(num));

});

//播放下一首歌
$("#next").click( function (){

player.controls.next();
num=num+1;
if(num>=s.options.length){num=0;
player.controls.playItem(player.currentPlaylist.item(num));
}
s.options[num].selected=true;

});

//播放上一首歌
$("#p").click( function (){
num=num-1;
if(num<0){
num=s.options.length-1;
player.controls.playItem(player.currentPlaylist.item(num));

}
s.options[num].selected=true;

});

//生成歌词的数组(从隐藏域中提取歌词的字符串)
$("#geci").hide();
$("#lcdiv").hide();
var ly="";
var arr_lyrics;
var j=0;
$("#showLs").click(function (){
var html = $.ajax({
url:"http://localhost:8080/music/lyrics.html",
async: false
}).responseText;

$("#geci").html(html);
arr_lyrics=get($("#geci").html());
for( i=0;i<arr_lyrics.length;i++){
ly+="<option >"+arr_lyrics[i][1]+"</option>";

}
ly=ly.substring(2,ly.length);

$("#lc").html(ly);

$("#lc").attr({size:arr_lyrics.length});

$("#lcdiv").show("slow");
setInterval(playLyrics,3000);

});

//歌词与歌曲的同步

function playLyrics (){
var playTime= player.controls.currentPositionString;

var min =playTime.substring(0,2);

var sec = playTime.substring(3,playTime.length);

var p_time = Number(min) * 60 + Number(sec);

for(i=0;i<lc.options.size-1;i++ ){

if( p_time>= arr_lyrics[i][0]&&p_time<arr_lyrics[i+1][0]){
j=i;

break;

}

}

lc.options[j].selected=true;
alert(parseInt(lc.style.top)-1);

};

</script>

lyrics.html
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<body>
[ti:让我忘了你]
[ar:沈世爱]
[al:半杯苦咖啡]
[by:bzmtv.com]

[03:53.24][01:53.08][00:01.60]沈世爱 - 让我忘了你
[03:58.98][01:59.16][00:09.85]www.50004.com
[02:35.66][00:39.31]
[02:37.23][00:40.27]当我想忘记你 紧紧闭上双眼
[02:42.96][00:46.02]想着一定会有人代替你的容颜
[02:48.88][00:51.91]我不会再想念 慢慢睁开双眼
[02:54.68][00:57.77]泪水已经模糊了我的视线
[03:00.27][01:03.24]在我忘记你之前 仿佛看见你的脸
[03:06.12][01:09.48]轰轰烈烈的故事 平淡无奇的结局
[03:11.96][01:15.14]我不想再有期盼 你给我一点光芒
[03:18.12][01:21.15]游荡在整个城市的两端
[03:23.66][01:26.80]在夜深人静的时侯 看着窗外的月光
[03:29.47][01:32.51]莫名的孤独和寂寞 映在回忆的路上
[03:35.34][01:38.39]你已经渐渐的离去 消失了像风一样
[03:41.19][01:44.20]每次当我走得累了 幻想着有你在身旁
[03:51.88][01:51.86]

</body>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<body>
[ti:让我忘了你]
[ar:沈世爱]
[al:半杯苦咖啡]
[by:bzmtv.com]

[03:53.24][01:53.08][00:01.60]沈世爱 - 让我忘了你
[03:58.98][01:59.16][00:09.85]www.50004.com
[02:35.66][00:39.31]
[02:37.23][00:40.27]当我想忘记你 紧紧闭上双眼
[02:42.96][00:46.02]想着一定会有人代替你的容颜
[02:48.88][00:51.91]我不会再想念 慢慢睁开双眼
[02:54.68][00:57.77]泪水已经模糊了我的视线
[03:00.27][01:03.24]在我忘记你之前 仿佛看见你的脸
[03:06.12][01:09.48]轰轰烈烈的故事 平淡无奇的结局
[03:11.96][01:15.14]我不想再有期盼 你给我一点光芒
[03:18.12][01:21.15]游荡在整个城市的两端
[03:23.66][01:26.80]在夜深人静的时侯 看着窗外的月光
[03:29.47][01:32.51]莫名的孤独和寂寞 映在回忆的路上
[03:35.34][01:38.39]你已经渐渐的离去 消失了像风一样
[03:41.19][01:44.20]每次当我走得累了 幻想着有你在身旁
[03:51.88][01:51.86]

</body>

播放列表的代码

Javascript代码

<SCRIPT language="JavaScript" type="text/JavaScript" >

//生成播放列表playList
var playlist= player.playlistCollection.newPlaylist("New");
//生成播放项
var m = player.newMedia("1.mp3");
//添加歌曲到播放列表
playlist.appendItem(m);
//设置当前的播放器播放的歌曲列表
player.currentPlaylist = playlist;

</SCRIPT>

<SCRIPT language="JavaScript" type="text/JavaScript" >

//生成播放列表playList
var playlist= player.playlistCollection.newPlaylist("New");
//生成播放项
var m = player.newMedia("1.mp3");
//添加歌曲到播放列表
playlist.appendItem(m);
//设置当前的播放器播放的歌曲列表
player.currentPlaylist = playlist;

</SCRIPT>

Leave a Reply

Your email address will not be published.