播放器.html
<html>
<head>
<style type="text/css">
<!--
body { color: #000000; font-family: "Arial"; font-size: 12pt; margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
td,body,input,select {font-size: 12px;color:#000000;}
body {
background-color: #FFFFDF;
}
body {
background-color: #6f6d6e;
background-image: url();
}
.STYLE9 {color: #FFFFFF}
.b_form5 {
background-color: #F1F5F7;
border: 1px solid #2978A0;
}
-->
</style>
<script language="javascript">
/**
* 代码功能
*
* 滚动图片的全体音乐列表悬停时显示列表内容，及文件名
* 并在悬停时实现拖拽效果，拖拽后可以进行全体音乐列表排序,
* 当拖拽到回收箱时，要将该文件删除并对全体音乐列表进行排序
* 释放后可以恢复滚动.全体音乐列表问新的排序后的列表
*
*
*
* 代码实现思路：
* JS建立两个数组，分别存放播放列表和全体音乐列表。列表数据是数据库中读取的
*
* 拖拽效果和滚动效果代码很多了，我也是找的。（拖拽效果据说是部门里的高人写的）
* 拖拽效果同时要触发删除，我采用的是抓取图片全屏坐标后，进行范围内的鼠标事件触发，准确度比较高
*
* 排序通过HTML表格框架关系实现，然后读入数组。
* 比较郁闷的就是滚动过程中，图片的屏幕位置问题，因为以表格形式表现图片的横向排列，隐藏部分实际位置
* 已经表格外，无法进行拖拽或排序，位置不对。此后我发现因为格式的要求，滚动过程中，每次只能显示3个图片
* 因此，我把滚动部分的代码和悬停时候的代码分做两个层，进行处理。
*
* 最后通过AJAX进行异步进行数据库操作。
*
* by:heartjump
*/
var music_list_length=0//播放列表当前位置
var music_list=[]//播放列表
var music_all_list=[]//所有音频文件列表
//初始化列表
music_list[0]='http://www.bznet.cn/mtv/pzypdl.wma';
music_list[1]='http://www.baoshengli.com/uploadfile/ggh.mp3';
music_list[2]='http://www.meilaodiy.com/10xiu/other/liangzhu.mid';
music_list[3]='http://www.xyyh.net/hjy/upfile/mp3/B011.mp3';
music_all_list[0]='<td id=mu_0 align=left><img src=images/yp03.GIF id="自定义" width=40 height=40 border=0 alt="123自定义"></td>';
music_all_list[1]='<td id=mu_1 align=left><img src=images/yp04.GIF id="自定义" width=40 height=40 border=0 alt="234自定义"></td>';
music_all_list[2]='<td id=mu_2 align=left><img src=images/yp02.GIF id="自定义" width=40 height=40 border=0 alt="345自定义"></td>';
music_all_list[3]='<td id=mu_3 align=left><img src=images/yp02.GIF id="自定义" width=40 height=40 border=0 alt="456自定义"></td>';
music_all_list[4]='<td id=mu_4 align=left><img src=images/yp04.GIF id="自定义" width=40 height=40 border=0 alt="567自定义"></td>';
music_all_list[5]='<td id=mu_5 align=left><img src=images/yp03.GIF id="自定义" width=40 height=40 border=0 alt="678自定义"></td>';
</script>
<SCRIPT Language ="JAVAScript" src=media.js></script>
<SCRIPT Language ="JAVAScript" FOR=WMPlayer EVENT=playStateChange(ns)>
//自动循环播放
WMPlayer_Chage(ns)
</SCRIPT>
</head>
<body>
<table width="160" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="160" height="21" bgcolor="#016F92">
<table width="96%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="73%" height="21" id=""><span class="STYLE9">我的音频</span></td>
<td width="19%" style=cursor:pointer onClick="showSet('music');"><span class="STYLE9">编辑</span></td>
<td width="8%">
<a href="#"><img src="images/b_cxbk_gb.gif" width="7" height="7" border="0" /></a></td>
</tr>
</table>
</td>
</tr>
<tr><td height="1" bgcolor="#D3D4D6"></td></tr>
<tr><td height="120">
<div align="center">
<OBJECT ID=WMPlayer CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="150" height="110">
<param name="autoStart" value="false">
<param name="balance" value="0">
<param name="currentPosition" value="0">
<param name="currentMarker" value="0">
<param name="enableContextMenu" value="false">
<param name="enableErrorDialogs" value="false">
<param name="enabled" value="true">
<param name="fullScreen" value="false">
<param name="invokeURLs" value="false">
<param name="mute" value="false">
<param name="playCount" value="1">
<param name="rate" value="1">
<param name="uiMode" value="none">
<param name="volume" value="100">
</OBJECT>
</div>
</td>
</tr>
<tr><td bgcolor="#D3D4D6">
<table width="100%" height="20" border="0" cellpadding="0" cellspacing="0" bgcolor="#C7C8CA">
<tr>
<td width="20%" align="center">
<a style=cursor:pointer onclick="WMPlayer_Previous()">
<img src="images/b_cxbk_n05.gif" alt="上一首" width="19" height="19" border="0" /></a></td>
<td width="20%" align="center">
<a style=cursor:pointer onclick="WMPlayer.controls.play()">
<img src="images/b_cxbk_n04.gif" width="19" alt="播放" height="19" border="0" /></a></td>
<td width="20%" align="center">
<a style=cursor:pointer onclick="WMPlayer.controls.pause()">
<img src="images/b_cxbk_n03.gif" width="19" alt="暂停" height="19" border="0" /></a></td>
<td width="20%" align="center">
<a style=cursor:pointer onclick="WMPlayer.controls.stop()">
<img src="images/b_cxbk_n02.gif" alt="停止" width="19" height="19" border="0" /></a></td>
<td width="20%" align="center">
<a style=cursor:pointer onclick="WMPlayer_Next()">
<img src="images/b_cxbk_n01.gif" alt="下一首"width="19" height="19" border="0" /></a></td>
</tr>
</table>
</td>
</tr>
</table>
<script language="javascript">
//开始自动播放
if (!music_list.length==0)
{
WMPlayer.url=music_list[music_list_length];
WMPlayer.controls.play();
}
</script>
<table width="160" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" id="music" style="display:none">
<tr>
<td width="160" height="21" bgcolor="#016F92">
<table width="96%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="73%" height="21"><span class="STYLE9">我的音频</span></td>
<td width="19%" style=cursor:pointer onclick="Save_Queue('mu','MUSIC','1231231323')"><span class="STYLE9">保存</span></td>
<td width="8%"><a href="#"><img src="images/b_cxbk_gb.gif" width="7" height="7" border="0" /></a></td>
</tr>
</table>
</td>
</tr>
<tr><td height="1" bgcolor="#D3D4D6"></td></tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="25" colspan="4"> 播放音频</td>
</tr>
<tr>
<td>
<DIV id=music_mar style="OVERFLOW: hidden; WIDTH: 140; COLOR: #ffffff"></DIV>
<DIV id=music_show style="display: none;"></DIV>
</td>
<td id="mu_c">
<div align="right"><img id="mu_c" src="images/ljx.gif" width="20" height="24" border="0"></div></td>
</tr>
</table>
</td>
</tr>
<tr><td height="1" colspan="2" bgcolor="#016F92"></td></tr>
<tr>
<td>
<form action="上传" id="upmusic" method="POST" ENCTYPE="multipart/form-data">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="35%" height="25"> 地址</td>
<td width="65%" align="left">
<input type="hidden" value="<?echo $blogid?>" name="blogid">
<input type="hidden" value="MUSIC" name="media">
<input name="musicfile" type="file" class="b_form5" size="8"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="35%"> 名称</td>
<td width="35%" align="left"><input name="name" type="text" class="b_form5" size="13"/></td>
<td onclick="submit()" width="30%"> 上传</td>
</tr>
</table></form>
</td>
</tr>
</table>
</body>
<SCRIPT language="javascript">
var music_k=0 //显示位置
music_show_Marquee();
var music_Mar=setInterval(music_Marquee,50);
function music_Marquee()
{
if (music_mar.scrollLeft>(music_all_list.length*45+10))
{
music_k=0;
music_mar.scrollLeft=0;
}
if (music_mar.scrollLeft%45==0 && music_mar.scrollLeft!=0)
{
music_k++;
}
music_mar.scrollLeft++;
}
music_mar.onmousemove=function()
{
clearInterval(music_Mar);
var str1
if ((music_all_list.length-music_k)<=3)
{
str1="<table height=43 border=0 cellpadding=0 cellspacing=5><tr id=mu>";
for (var num=(music_all_list.length-3);num<music_all_list.length;num++)
str1+=music_all_list[num];
str1+="</tr></table>";
}
else
{
str1="<table height=43 border=0 cellpadding=0 cellspacing=5><tr id=mu>";
for (var num=music_k;num<(music_k+3);num++)
str1+=music_all_list[num];
str1+="</tr></table>";
}
music_show.style.enabled = true;
music_mar.innerHTML="";
music_mar.style.display="none";
music_show.innerHTML=str1;
music_show.style.display="";
music_mar.style.enabled = false;
my_move('MUSIC',music_all_list);
return;
}
music_show.onmouseleave=function music_leave()
{
if (!on_mydrage)//没出现拖拽效果
{
//更新列队
newstr=innerHTMLtoarray(music_show.innerHTML);
for (var j=0; j<3; j++)
{
if (newstr[j])
music_all_list[music_k+j]=newstr[j];
else
music_all_list[music_k+j]="";
}
for (var f=0; f<music_all_list.length; f++)
{
if (music_all_list[f]=="")
{
for(var b=f; b<music_all_list.length; b++)
music_all_list=music_all_list[b+1];
music_all_list.length--;
}
}
music_show_Marquee();
music_Mar=setInterval(music_Marquee,50);
}
}
function music_show_Marquee()//滚动加载
{
var str
str="<TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace=0><TR><TD vAlign=top><table height=43 border=0 cellpadding=0 cellspacing=5><tr id=mu>";
for (var k=0;k<music_all_list.length;k++)
str+=music_all_list[k];
str+="</tr></table></TD><TD vAlign=top><font color=#ffffff>11231231231231231231123213213231232321313</font></TD></TR></TABLE>";
music_mar.style.enabled = true;
music_show.innerHTML="";
music_show.style.display="none";
music_mar.innerHTML=str;
music_mar.style.display="";
music_show.style.enabled = false;
}
function showSet(obj) //显示与隐藏层
{
var a;
a = _gel(obj);
if(a.style.display == ""){
a.style.display = "none";
}else{
a.style.display = "";
}
}
</SCRIPT>
</html>
media.js
/* 拖拽代码段 */
var k=false;//层加载
var apo=0
var Frameid=[]//加载虚拟层后的对象数组
var ami=null//虚拟层对象
var on_mydrage=false;//拖动效果是否实现
function creatediv()//建立虚拟层
{
if(!ami)
{
ami=document.createElement("DIV");
ami.style.display="none";
ami.style.position="absolute";
ami.style.cursor="move";
ami.style.backgroundColor="#ffffff";
ami.style.paddingBottom="0px";
document.body.appendChild(ami)
}
return ami
}
function _gel(a)
{
return document.getElementById?document.getElementById(a):null;
}
function my_move(media,md_all_list)
{
//初始化
k=false;//层加载
apo=0;
Frameid=[];//加载虚拟层后的对象数组
ami=null;//虚拟层对象
on_mydrage=false;
var Frameid = Array()//外层列表
if (media=='MUSIC')
{
if(_gel("mu"))//id为music的外层
{
Frameid[0] = _gel("mu");//内层id名,标签名<td id="mu"></td>
k=true;
}
}
if(k)
{
drag_move(Frameid,md_all_list);
k=false;
}
}
function drag_move(Fid,md_all_list)//加载层信息
{
Frameid=Fid;
for(var a=0;a<Frameid.length;a++)//外框架层循环加载
{
for(var b=0;b<md_all_list.length;b++)//子层循环加载
{
var dragid=_gel(Frameid[a].id+"_"+b)
if (!dragid) continue;
dragid.module = dragid;
my_drag.init(dragid);//拖动初始化
dragid.onDragStart=function(af,ag)
{
clearInterval(apo);//重置
var Mydiv=this.module;
Positioning(Mydiv);//确定要移动对象的全屏位置
Mydiv.origNextSibling = Mydiv.nextSibling;//移动到新位置
var VirtualDIV=creatediv();
VirtualDIV.style.left = event.clientX-Mydiv.offsetWidth/2;
VirtualDIV.style.top = PagePos(Mydiv,false);
VirtualDIV.style.height = Mydiv.offsetHeight;
VirtualDIV.style.width = Mydiv.offsetWidth;
VirtualDIV.style.display = "block";
VirtualDIV.style.opacity = 0.8;
VirtualDIV.style.filter = "alpha(opacity=80)";
VirtualDIV.innerHTML = Mydiv.innerHTML;
VirtualDIV.className = Mydiv.className;
this.dragged=false;
on_mydrage=true;
};
dragid.onDrag=function(af,ag)
{
this.dragged=true;
Queue(this.module,af,ag,"Ins");//插入队列
};
dragid.onDragEnd=function(af,ag)
{
if(this.dragged)
{
//释放激活;
if (this.module.parentNode.id+'_c')//判断是否有垃圾桶，id规则mu_c
{
//增加垃圾桶屏幕位置
var TrashX = PagePos(_gel(this.module.parentNode.id+'_c'),true);
var TrashY = PagePos(_gel(this.module.parentNode.id+'_c'),false);
var DivX = PagePos(creatediv(),true) + parseInt(creatediv().style.width)/2
var DivY = PagePos(creatediv(),false)/* - parseInt(creatediv().style.height)*/
if (TrashX+25 > DivX && TrashX-5 < DivX && DivY < TrashY+29 && DivY > TrashY-5)//垃圾桶触发范围
{
if (confirm("您是否要删除该文件？")==true)
{
creatediv().style.display="none";
Queue(this.module,af,ag,"Del");
}
else
{
apo=Release(this.module,150,15);//释放的效果
}
}
else
{
apo=Release(this.module,150,15);//释放的效果
}
}else apo=Release(this.module,150,15);//释放的效果
on_mydrage=false;
}
else
{
creatediv().style.display="none"
if(this.href)
{
if(this.target)
{
window.open(this.href,this.target)
}
else
{
document.location=this.href
}
}
}
this.target=null;this.href=null;
}
}
}
}
var my_drag=
{
"obj":
null,
"init":
function(a)
{
a.onmousedown=my_drag.start;
if(isNaN(parseInt(creatediv().style.left)))
creatediv().style.left="0px";
if(isNaN(parseInt(creatediv().style.top)))
creatediv().style.top="0px";
a.onDragStart=new Function();
a.onDragEnd=new Function();
a.onDrag=new Function();
},
"start":
function(a)
{
var aa=my_drag.obj=this;
a=my_drag.fixE(a);
var ab=parseInt(creatediv().style.top);
var ac=parseInt(creatediv().style.left);
aa.onDragStart(ac,ab,a.clientX,a.clientY);
aa.lastMouseX=a.clientX;
aa.lastMouseY=a.clientY;
document.onmousemove=my_drag.drag;
document.onmouseup=my_drag.end;
return false
},
"drag":
function(a)
{
a=my_drag.fixE(a);
var aa=my_drag.obj;
var ab=a.clientY;
var ac=a.clientX;
var ad=parseInt(creatediv().style.top);
var ae=parseInt(creatediv().style.left);
var af,ag;af=ae+ac-aa.lastMouseX;
ag=ad+ab-aa.lastMouseY;
creatediv().style.left=af+"px";
creatediv().style.top=ag+"px";
aa.lastMouseX=ac;
aa.lastMouseY=ab;
aa.onDrag(af,ag,a.clientX,a.clientY);
return false
},
"end":
function()
{
document.onmousemove=null;
document.onmouseup=null;
my_drag.obj.onDragEnd(parseInt(creatediv().style.left),parseInt(creatediv().style.top));
my_drag.obj=null
},
"fixE":
function(a)
{
if(typeof a=="undefined")
a=window.event;
if(typeof a.layerX=="undefined")
a.layerX=a.offsetX;
if(typeof a.layerY=="undefined")
a.layerY=a.offsetY;
return a
}
};
function Positioning(a)
{
for(var aa=0;aa<Frameid.length;aa++)
{
var ab=0;
for(var ac=0;ac<Frameid[aa].childNodes.length;ac++)
{
var ad=Frameid[aa].childNodes[ac];
if(ad==a)
ab=ad.offsetHeight;
ad.pagePosLeft=PagePos(ad,true);
ad.pagePosTop=PagePos(ad,false)-ab
}
}
}
function Queue(div,m_x,m_y,doi)//队列操作
{
var ac=null;
var ad=100000000;
var app;
for(var a=0;a<Frameid.length;a++)
{
for(var b=0;b<Frameid[a].childNodes.length;b++)
{
var ag=Frameid[a].childNodes;
if(ag==div) continue;
var ai=Math.sqrt/*平方根*/(Math.pow(m_x-ag.pagePosLeft,2)+Math.pow(m_y-ag.pagePosTop,2)/*平方函数*/);
if(isNaN(ai)) continue;
if(ai<ad)
{
ad=ai;
ac=ag;
}
}
}
if(ac!=null&&a.nextSibling!=ac)
{
if (doi=="Ins")
{
ac.parentNode.insertBefore(div,ac);//队列插入
div_display(div);
}
else if (doi=="Del")
{
ac.parentNode.removeChild(div);
}
}
}
function div_display(a)
{
a.parentNode.style.display="none";
a.parentNode.style.display="";
}
function Release(div,aa,ab)
{
var ac=parseInt(creatediv().style.left);
var ad=parseInt(creatediv().style.top);
var ae=(ac-PagePos(div,true))/ab;
var af=(ad-PagePos(div,false))/ab;
return setInterval(function()
{
if(ab<1)
{
clearInterval(apo);
creatediv().style.display="none"
ami.innerHTML = ''
return
}
ab--;
ac-=ae;
ad-=af;
creatediv().style.left=parseInt(ac)+"px";
creatediv().style.top=parseInt(ad)+"px";
}
,aa/ab
)
}
function PagePos(a,aa)//屏幕位置读取
{
var ab=0;
while(a!=null)
{
ab+=a["offset"+(aa?"Left":"Top")];
a=a.offsetParent;
}
return ab
}
/* 音频播放代码段 */
function WMPlayer_Chage(ns)//循环播放
{
if(ns == 8)//播放结束，进入下一曲
setTimeout('WMPlayer_Next()', 1000);
}
function WMPlayer_Next()
{
if (!music_list.length==0)
{
WMPlayer.controls.stop();
if (music_list_length==music_list.length-1)
music_list_length=0;
else
music_list_length++;
WMPlayer.url=music_list[music_list_length];
WMPlayer.controls.play();
}
}
function WMPlayer_Previous()
{
if (!music_list.length==0)
{
WMPlayer.controls.stop();
if (music_list_length==0)
music_list_length=music_list.length-1;
else
music_list_length--;
WMPlayer.url=music_list[music_list_length];
WMPlayer.controls.play();
}
}
//保存代码
function Save_Queue(name,media,blogid)
{
if (_gel(name))
{
var code='a' //MEDIA列表文件ID
for (var lb=0;lb<_gel(name).childNodes.length;lb++)
if (code=='a')
code = _gel(name).childNodes[lb].childNodes[0].id;
else
code = code + "|" + _gel(name).childNodes[lb].childNodes[0].id;
//ajax发送数据
AjaxObj = getXMLHTTPRequest();
AjaxObj.onreadystatechange = function(){};
AjaxObj.open("POST","module/savemedia.php",true);
AjaxObj.setRequestHeader('Content-type','application/x-www-form-urlencoded');
AjaxObj.send("str="+code+"&class="+media+"&blogid="+blogid);
if (media=="MUSIC")
{
alert("音频列表保存成功！");
location.href="addmodule.php?wid="+blogid;
}
else
{
alert("视频列表保存成功！");
location.href="addmodule.php?wid="+blogid;
}
}
else
{
if (media=="MUSIC")
alert("音频列表出现错误！");
else
alert("视频列表出现错误！");
}
}
function getXMLHTTPRequest()
{
var xRequest=null;
if (window.XMLHttpRequest)
{
xRequest=new XMLHttpRequest();
}
else if (typeof ActiveXObject != "undefined")
{
xRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
return xRequest;
}
function innerHTMLtoarray(str)//HTML转换为数组队列
{
var start=str.indexOf('<TD ');
var end=str.lastIndexOf('</TD>');
var str2=str.substring(start,end+5);
var i=0;
var strk=[]
while (!str2=="")
{
var en=str2.indexOf('</TD>');
strk=str2.substring(0,en+5);
str2=str2.substring(en+5,str2.len);
i++;
}
return strk;
}