<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>音乐播放器</title>
<link href="music.css" rel="stylesheet" type="text/css" /></head><body onload="on_music();">
<!--播放器模块 Start-->
<div id="vitoland_music">
<script>
//名称:音乐播放器
//版本:1.0
//作者:李振兴
//邮箱:[email protected]
//网址:http://www.vitoland.cn/
//完成时间:2010年5月17日
//使用须知:您需要按格式添加音乐,否则程序会出错
// a[编号接上一个]="歌曲名称";
// b[编号与a相同]="歌曲地址";var web_name='惊起一滩鸥鹭'; //你的网站名称,下面可关闭
var bfq_name='音乐播放器'; //播放器名称,下面可关闭
var bfq_btl_gg=0; //是否在浏览器标题栏显示播放信息,0表示否,1表示是
var stanley_music=0; //加载播放器时是否播放,0表示否,1表示是
var huanying='<b><font color=black>欢迎您来到'+web_name+',在下诚挚邀请您在这里多坐会儿。</font></b>';
  // 上面设定为不播放时,这是在播放器面板上显示的欢迎词,可自行更改,支持简单的HTML代码function diag_list(){
  xh=1; //播放列表下标
  a=new Array();
  b=new Array();  a[1]="超人不会飞 周杰伦";
  b[1]="http://news.scuec.edu.cn/xzw/admin/music/cc715f386db7165412359fa2aca21399.mp3";
  a[2]="长椅 刘若英";
  b[2]="http://um.mofei.com.cn/shengkan/UploadFile/%E6%BD%AE%E6%B5%81%E9%9F%B3%E4%B9%90/%E9%95%BF%E6%A4%85.wma";
  a[3]="指望 郁可唯";
  b[3]="http://clubpic.vodone.com/attachments/2010/05/149156535_201005022133108175.mp3";
  a[4]="偏食 杨丞琳";
  b[4]="http://www.zunyun.com/music/10415/偏食.wma";
  a[5]="勇敢爱 张靓颖";
  b[5]="http://pic.evlife.com.cn/AdvFiles/MKT/TcMktImg/yga.wma";
  a[6]="台湾心跳声 蔡依林";
  b[6]="http://www.zunyun.com/music/10415/台湾心跳声.wma";
  a[7]="take me to your heart";
  b[7]="http://www.fyyzg.com/yg/up/updj/20091950958393.wma";
  a[8]="快乐崇拜 潘玮柏";
  b[8]="http://au.9you.com/download/song/12.mp3";
  a[9]="一人一梦 张含韵";
  b[9]="http://mat1.qq.com/musictop2/dq/0706/yirenyimeng.mp3";
  a[10]="去爱吧 胡歌";
  b[10]="http://124.115.215.215/bbmedia.qq.com/media/music/audio/200805/qabhg.mp3";
  //在这里继续添加歌曲,请注意格式及序号连续
    
  m=parseInt(a.length)-parseInt(1); //计算数组上标
  for(var i=1;i<=m;i++){
  list.innerHTML+="<div id=\"list_"+i+"\" class=\"list_n\" onclick=\"changemusic('"+b[i]+"','"+a[i]+"','"+i+"');\"\>"+a[i]+"</div\>";
  }
}//-------------以下无需修改,否则程序会出问题。当然,如果您会JS,请无视这些提示--------------//
function on_music(){ //播放器初始化
  vitoland_music.innerHTML="<table id='music_kz' cellspacing='0' cellpadding='0'><tr><td width='25' align='center'><input id='bf_zt' type='image' title='点击播放' src='images/play.png' onclick='play_pause();' /></td><td id='music_info' align='left' title='单击此处静音,再次单击恢复。' onclick='mute();'><div id='jindutiao'></div><div id='info'><marquee behavior='scroll' scrollamount='2' direction='left'><span id='music_name'></span><span id='jingyin'></span>&nbsp;&nbsp;<span id='time'></span></marquee></div><div id='hct'></div></td><td width='21px' align='center'><input type='image' title='播放列表' src='images/list.png' onclick=display:""; /></td><td width='22px' align='center'><input type='image' title='播放器视频区域' src='images/tv.png' onclick='music_tv();' /></td></tr></table><div id='list' style='display:none;'><div id='list_n' class='list_n'></div><div id='list_n' class='list_n' style='color:#FFC;'><span onclick='diag_user();'>添加歌曲</span>&nbsp;&nbsp;<span onclick='previous();'>上一曲</span>&nbsp;&nbsp;<span onclick='next();'>下一曲</span>&nbsp;&nbsp;<span id='dq_xh' onclick='music_xh();'>循环</span></div></div><div id='overlay' style='display:none;'></div><div id='music_tv' class='floatDiv' style='display:none;'><div class='divTitle'><div><font color='#000000'>视频区域&nbsp;&nbsp;(双击图像,全屏观看。)</font></div></div><div class='divContent'><object id='stanley_music_name' width='320px' height='240px' classid='CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6'><param name='URL' value='' /><param name='autoStart' value='1' /><param name='loop' value='1' /><param name='uiMode' value='none' /></object></div><div class='divFoot'><input type='button' class='divButton' onclick='music_tv()'; value='关 闭' /></div></div><br /><br />"
  diag_list();
dqxh=0;
  if(stanley_music==1){changemusic(b[1],a[1],'1');}
  if(stanley_music==0){music_name.innerHTML=huanying;}
}function changemusic(url,musicname,xuhao){ //将歌曲信息传递给播放器和显示在相关的层中
  vara=musicname;
  xh=xuhao;
  music_name.innerText='连接歌曲 '+vara;
  jingyin.innerText=time.innerText='';
  document.getElementById('bf_zt').src='images/play.png';
  document.getElementById('bf_zt').title='点击播放';
  if(bfq_btl_gg==1){window.document.title=web_name+'—'+bfq_name;};
  document.getElementById("stanley_music_name").url=url;
}
function bfq(){ //播放器主控程序
  var bf_zt=document.getElementById('bf_zt');
  if(stanley_music_name.playState==9){ //连接状态
if(bfq_btl_gg==1){window.document.title=web_name+'—连接歌曲—'+vara;};
  time.innerText='连接歌曲 '+vara+' ……';
  }
  if(stanley_music_name.playState==6){ //缓冲状态
if(bfq_btl_gg==1){window.document.title=web_name+'—缓冲歌曲—'+vara;};
  time.innerText='缓冲歌曲 '+vara+' ……';
  }
  if(stanley_music_name.playState==3){ // 播放状态
  document.getElementById('jindutiao').style.width=parseInt((stanley_music_name.controls.currentPosition/stanley_music_name.currentMedia.duration)*117+'px');
  time.innerText=stanley_music_name.controls.currentPositionString+' | '+stanley_music_name.currentMedia.durationString;
  document.getElementById('hct').style.width=stanley_music_name.network.downloadProgress+'%';
  bf_zt.src='images/pause.png';
  bf_zt.title='点击暂停';
  if(bfq_btl_gg==1){window.document.title=web_name+'—★ '+vara+' ★';};
  music_name.innerText=vara;
  }
  if(stanley_music_name.playState==2){ //暂停状态
  if(bfq_btl_gg==1){window.document.title=web_name+'—暂停播放—'+vara;};
time.innerText='已经暂停播放。';
  bf_zt.src='images/play.png';
  bf_zt.title='点击播放';
  }
  if(stanley_music_name.playState==1){ //停止状态
  document.getElementById('hct').style.width='1%';
  document.getElementById('jindutiao').style.width='1px';
  bf_zt.src='images/play.png';
  bf_zt.title='点击播放';
  jingyin.innerText=time.innerText='';
  if(bfq_btl_gg==1){window.document.title=web_name+'—'+bfq_name;};
next();
  }
}
setInterval("bfq();",200); //播放器主控程序定时器
function chang_list(){ //播放列表控制核心
  vara=a[xh];
  document.getElementById("stanley_music_name").url=b[xh];
  music_name.innerHTML='连接歌曲 '+a[xh];
  jingyin.innerText=time.innerText='';
  document.getElementById('bf_zt').src='images/play.png';
  document.getElementById('bf_zt').title='点击播放';
  if(bfq_btl_gg==1){window.document.title=web_name+'—'+bfq_name;};
}
function previous(){ //上一曲
  if(dqxh==1){xh=xh;}else{xh=parseInt(xh)-parseInt(1);}; //播放列表下标减一
  if(xh<1){alert('已经到第一首歌曲了!');stop();xh=1;} //如果下标小于1,则赋值为1,重新播放
  chang_list();
}
function next(){ //下一曲
  if(dqxh==1){xh=xh;}else{xh=parseInt(xh)+parseInt(1);}; //播放列表下标加一
  if(xh>m){xh=1;} //如果下标超过歌曲总数,则赋值为1,重新播放
  chang_list();
}
function play_pause(){ //播放暂停按钮,状态修改
  if(stanley_music_name.playState==3){
  stanley_music_name.controls.pause();
  }
  else if(stanley_music_name.playState==2){
  stanley_music_name.controls.play();
  }
  else if(stanley_music==0){
  if(xh>m){xh=1;} //如果下标超过歌曲总数,则赋值为1,重新播放
  chang_list();
  }
}
function mute(){ //是否静音
  stanley_music_name.settings.mute=stanley_music_name.settings.mute==true?false:true;
  jingyin.innerText=stanley_music_name.settings.mute==false?'':' 正在静音,再次单击即可取消静音。';
}
function music_tv(){ //视频区域的显示与隐藏
  display('overlay');
  display('music_tv');
}
function music_xh(){ //开启单曲循环
if(dqxh==0){
  dq_xh.innerText='单曲';
dqxh=1;
alert('已切换为单曲循环模式');
  }
  else{
  dq_xh.innerText='循环';
dqxh=0;
alert('已切换为列表循环模式');
  }
}
function diag_user(){ //添加歌曲,页面刷新后消失
  alert('临时添加歌曲,页面刷新后消失。');
  m=parseInt(m)+parseInt(1);
  var str_name=prompt("歌曲的名称:","歌曲的名称");
  var str_url=prompt("歌曲的网址:","歌曲的网址");
  if(str_url,str_name)
  {
  a.splice(m,0,'新添加:'+str_name);
  b.splice(m,0,str_url);
  list.innerHTML+= "<div id=\"list_"+m+"\" class=\"list_n\" onclick=\"changemusic('"+str_url+"','新添加:"+str_name+"','"+m+"');\"\>新添加:"+str_name+"</div\>";
  }
}
</script>
正在加载播放器……</div>
<!--播放器模块 End-->
</body>
</html> 

解决方案 »

  1.   

    对应的music.CSS:============================================
    @charset "utf-8";
    /*名称:音乐播放器*/
    /*版本:1.0*/
    /*本文件是:音乐播放器样式表*/
    /*作者:李振兴*/
    /*邮箱:[email protected]*/
    /*网址:http://www.vitoland.cn http://www.codefans.net/*/
    /*完成时间:2010年5月17日*//** {filter:gray;}*/
    body,td,th {
    font-family:Arial,"微软雅黑","宋体";
    font-size:12px;
    }
    #music_info {
    position:relative;
    width:117px;
    top: 3px;
    }
    #jindutiao,#info {
    position:absolute;
    left:0;
    right:0;
    }
    #info{
    width:97%;
    z-index:3;
    }
    #jindutiao{
    width:1px;
    height:17px;
    z-index:2;
    background-image:url(images/jdt.png);
    }
    #hct {
    position:absolute;
    background-image:url(images/hct.png);
    width:1%;
    height:17px;
    z-index:1;
    background-color:#6C6;
    }
    .hr {
    border-top:1px dashed #339933;
    }
    #music_kz{
    position: absolute;
    z-index:10;
    width:185px;
    height:23px;
    background-image:url(images/bg.png);
    }
    #list{
    position: absolute;
    z-index:9;
    width:175px;
    background-image:url(images/x.png);
    padding-right: 5px;
    padding-left: 5px;
    }
    .list_n{
    width:170px;
    height:18px;
    cursor:pointer;
    border-bottom:1px dashed #339933;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 5px;
    }
    /*----------------黑色半透明背景、弹出层------------------*/
    #overlay{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter:alpha(opacity=40);
    -moz-opacity: 0.6;
    opacity: 0.6;
    }
    .floatDiv{
    padding:0 0 0 0;
    position:absolute;
    width:325px;
    height:300px;;
    margin:0 0 0 0;
    z-index:10;
    border:1px solid #DADADA;
    background:#FFF;
    padding:1px;
    left:50%;/*FF IE7*/
    top:50%;/*FF IE7*/
    margin-left:-162.5px!important;/*FF IE7 该值为本身宽的一半 */
    margin-top:-150px!important;/*FF IE7 该值为本身高的一半*/
    }
    .floatDiv .divTitle{
    background:#E0E0E0;
    background-position:top left;
    background-repeat:repeat-x;
    height:25px;
    line-height:25px;
    padding:0px 4px;
    cursor:default;
    }
    .floatDiv .divContent{
    padding:3px;
    height:auto; cursor:default;
    }
    .floatDiv .divFoot{
    background:#F0F0F0;
    text-align:right;
    padding:4px;
    background:#E0E0E0;
    background-position:top left;
    background-repeat:repeat-x;
    }
    .floatDiv input.divButton{
    background:#E0E0E0;
    background-position:top left;
    background-repeat:repeat-x;
    border:1px solid #D1D3D2;
    height:21px;
    font-size:12px;
    padding:2px 5px;
    color:#626264;
    }
      

  2.   

    ?????????????????????
    <input type='image' title='播放列表' src='images/list.png' onclick=display:""; />
      

  3.   

    修改相应的元素 style.display='block';