鸿 网 互 联 www.68idc.cn

一个桌面播放器,html+script

来源:互联网 作者:佚名 时间:2013-04-25 12:06

<html>
<head>
<title>ThreeAnts Player</title>
<base target="_self">
<meta name="author" content="episome">
<meta name="keywords" content="Player,cdf,desktop toy">
</head>
<style>
body{
 border:#0099cc 2px solid;
 background-color:WhiteSmoke;
 margin:5px;
}
body,td{
 font-family:Tahoma,Georgia;
 font-size: 8pt;
 white-space: nowrap;
}
#percent{
 font-size:7pt;
 color:green;
 font-weight: bold;
}
.ctrlBar td{
 filter: Alpha(Opacity=100, FinishOpacity=30, Style=1, StartX=0, StartY=0, FinishX = 0, FinishY = 50);
 font-weight: bold;
 font-size: 7pt;
 color:darkblue;
 border:#0099cc 1px solid;
 background-color:#FFF;
}
A:visited,A:link{
 color:darkblue;
 cursor: hand;
 text-decoration: none;
}
A:hover{
 color:red;
 cursor: hand;
 text-decoration: none;
}
.content td{
 width:100%;
 table-layout: fixed;
 filter: Alpha(Opacity=100, FinishOpacity=40, Style=1, StartX=0, StartY=0, FinishX = 0, FinishY = 50);
 cursor: hand;
 border:#0099cc 1px solid;
 border-top:0px;
 background-color:white;
 height: 24px;
}
.hilite_content td{
 width:100%;
 table-layout: fixed;
 color:red;
 cursor: hand;
 border-right:#0099cc 1px solid;
 border-left:#0099cc 1px solid;
 border-bottom:#0099cc 1px solid;
 background-color:#ddedfb;
 height: 24px;
}
</style>
<script language="JavaScript">
var scrollcount=0;
var dragy;
var scrollarrowtop;
function initdrag() {
 scrollcount=1;
 dragy=event.clientY;
 document.body.setCapture();
}
function startdrag() {
 if (scrollcount==1) {
  window.scrollBy(0,dragy-event.clientY);
  document.body.style.cursor='hand';
  dragy=event.clientY;
 }
}
function enddrag() {
 document.body.style.cursor='';
 scrollcount=0;
 document.body.releaseCapture();
}
</script>
<body
scroll=no
ondragstart = "return false;"
onselect = "return false;"
onselectstart="return false;"
onmousedown="initdrag()"
onmousemove="startdrag()"
onmouseup="enddrag()"
>
<script>
var PlayType = ",wma,wmv,avi,mpg,mpeg,m1v,mp2,wav,mp3"
var nowPlayingID
var lastSelected
var lastPlayed

var si = setInterval("Timer()",1000)
function Timer(){
 percent.innerHTML = Math.round((Player.currentposition/Player.selectionend)*100)+"%"
 ttt.style.width = Math.round((Player.currentposition/Player.selectionend)*100)+"%"
 if((Player.currentposition >= Player.selectionend) && Player.currentposition!=0){
  clearInterval(si)
  playNextMusic()
  si = setInterval("Timer()",1000)
 }
}
function mute(){
 Player.mute = !Player.mute
}
//检测载入的文件类型
function CheckType(){
 var s = FileObj.value.split(".");
 return PlayType.indexOf(s[s.length-1].toLowerCase())>0?true:false;
}
// open
function openMusic(){
  FileObj.click();
  if(FileObj.value != "" && CheckType()){
   FileObj.value.replace("");
   addMusic(FileObj.value);
   FileObj.value = "";
  }
}
// Add music
function addMusic(musicSrc){
 var newTR=playListTable.insertRow();
 var newTD=newTR.insertCell();
 newTR.className = "content";
 newTR.onclick = function(){
  if (lastSelected != null){
   lastSelected.className = "content"
  }
  this.className = "hilite_content"
  lastSelected = this
 }
 newTD.ondblclick = function(){
  playMusic(this.id)
 }
 newTD.oncontextmenu = function(){
  playListTable.deleteRow(this.parentElement.rowIndex)
 }
 musicTitle = musicSrc.split("\");
 musicTitle = musicTitle[musicTitle.length-1].split(".");
 musicTitle = musicTitle.slice(0,musicTitle.length-1);
 newTD.innerHTML = musicTitle
 newTD.musicName = musicTitle
 newTD.musicSrc  = musicSrc
 newTD.id  = "m" + newTR.rowIndex
}
// play
function playMusic(id,currentposition){
 if (lastPlayed != null){
  lastPlayed.innerHTML = lastPlayed.musicName
 }
 if(!document.all[id]){
  id = "m1"
 }
 TD = eval(id)
 TD.innerHTML += "&nbsp;<a id=percent></a>"
 lastPlayed = TD
 Player.filename = TD.musicSrc
 nowPlayingID = id
 Player.currentposition = (currentposition == undefined) ? 2 : currentposition
}
// play next music
function playNextMusic(){
 Player.stop()
 newID = parseInt(nowPlayingID.replace("m",""))+1
 playMusic("m"+newID)
}
// play prev music
function playPrevMusic(){
 Player.stop()
 newID = parseInt(nowPlayingID.replace("m",""))-1
 playMusic("m"+newID)
}
// cookie
function saveCookie(name,value,days) {
 if (days) {
  var date = new Date();
  date.setTime(date.getTime()+(days*24*60*60*1000))
  var expires = "; expires="+date.toGMTString()
 }
 else expires = ""
 document.cookie = name+"="+value+expires+"; path=/"
}
function readCookie(name) {
 var nameEQ = name + "="
 var ca = document.cookie.split(';')
 for(var i=0;i<ca.length;i++) {
  var c = ca[i];
  while (c.charAt(0)==' ') c = c.substring(1,c.length)
  if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length)
 }
 return null
}
function deleteCookie(name) {
 saveCookie(name,"",-1)
}
// Load play list from Cookie
window.onload = function(){
 cookiePlayList = readCookie("cookiePlayList")
 cookiePlayList = cookiePlayList.split(",");
 for(x in cookiePlayList){
  addMusic(cookiePlayList[x])
 }
 cookieNowPlayingID = readCookie("cookieNowPlayingID")
 cookieCurrentposition = readCookie("cookieCurrentposition")
 playMusic(cookieNowPlayingID,cookieCurrentposition)
}
// Save play list & now playing
window.onunload = function(){
 if(Player.filename!="" && Player.filename!=null){
  saveCookie("cookieNowPlayingID",nowPlayingID,100)
  saveCookie("cookieCurrentposition",Player.currentposition,100)
 }
 var playList = new Array()
 for(i=1;i<playListTable.rows.length;i++){
  playList.push(playListTable.rows[i].cells[0].musicSrc)
 }
 saveCookie("cookiePlayList",playList,100)
}
window.onerror = function(){
 return true;
}
</script>
<table cellpadding="3" cellspacing="0" width='100%' id="playListTable" onselectstart="return false;">
 <tr class="ctrlBar">
  <td>
   <a href="javascript:openMusic()">open</a>
    | <a href="javascript:playPrevMusic()">prev</a>
    | <a href="javascript:Player.play()">play</a>
    | <a href="javascript:Player.pause()">pause</a>
    | <a href="javascript:Player.stop()">stop</a>
    | <a href="javascript:playNextMusic()">next</a>
   <!--  | <a href="javascript:mute()">mute</a> -->
  </td>
 </tr>
</table>
<table cellspacing="1" width='100%' onselectstart="return false;" style="border:#0099cc 1px solid;">
 <tr class="ctrlBar">
  <td id="ttt" style="background-color:black;height:12px;width:1px;"></td>
  <td style="background-color:silver;"></td>
 </tr>
</table>
<object classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" id="Player" width="0" height="0">
 <param name="autoplay" value="1">
</object>
<input type="file" id="FileObj" style="display:none">
</body>
</html>

上一篇:HTC简单教程
下一篇:Marquee 用法
网友评论
<