play

来源：互联网发布：红包分析软件编辑：程序博客网时间：2024/04/28 15:42

<!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="listen.css" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="css/play.css" />
</head>
<body>
<div class="play_bg">
   <div class="play_area">
      <h3 class="m_bottom"><a href="#"><img src="images/m.png" /></a>Do not ask her that...</h3>
       <span class="number"><a id="starTime" href="#">00:00 </a> <a id="endTime" class="fl" href="#">00:00 </a></span>
       <span class="scroll_title">
           <span id="scroll_bg_id" class="scroll_bg"></span>
          <div id="scroll_t_d_o" style="position:relative; left:-5px; top:-8px; height:18px; border:medium; cursor:pointer; border-color:#FF0000; width:470px;">
                <div id="scroll_t_d_i" style="position:absolute;display:none; width:18px; left:0px; top:0px; height:18px;background-image:url(images/voice_dot.png);cursor:pointer; left:0px; top:0px; width:18px; height:18px; ">
                    </div>
                 </div>
        </span>
       <span class="mune_title ">

       <a href="#" class="ft f_s l_h">Download:www.rororo.com</a>
       
        <span class="fl">
         <a><img id="order" src="images/x.gif" title="顺序播放" alt="顺序播放"/></a>
         <a><img id="random" src="images/h.gif" title="随机播放" alt="随机播放"/></a>
         <a><img id="circle" src="images/y.gif" title="单曲循环" alt="单曲循环"/></a>
         <a><img id="voiceBtn" src="images/g.gif"/></a>
         <a><img id="title_bg" src="images/title_bg.gif"/></a>
        <div id="voic_d_o" style="position:relative; cursor:pointer; height:18px; width:150px; left:108px; top:-22px;">
      <span id="voic_id" class="voic_id_bg">
        </span>
      <div id="voic_d_i" style="position:absolute;background-image:url(images/voice_d.png);cursor:pointer;left:0px;top:0px;width:18px;height:18px;"></div>

      </div>


       </span>

       </span>
   </div>

   <div class="play_btn">
    <a href="#" class="n_pos"><img id="img_0" src="images/prve.png" /></a>
    <a href="#" class="s_pos"><img id="img_1" src="images/pl_btn_puase.png" /></a>
    <a href="#" class="z_pos"><img id="img_2" src="images/next.png" /></a>


   </div>

</div><div id="sName"></div>
        <div style="position:absolute; left:9px; top:181px; width:432px; height:95px;">
        <li><div id="s0" onclick="getUrl(this)">K歌之王.wav</div></li>
        <li><div id="s1" onclick="getUrl(this)">吻别.wav</div></li>
        <li><div id="s2" onclick="getUrl(this)">一千年以后.wav</div></li>
        <li><div id="s3" onclick="getUrl(this)">qgwl.wma</div></li>
</div>

<div id="song_box">
<div class="song_title"> </div>

<div class="song_l" >
<textarea id="lrcText" name="lrcText" style="display:none">
[type:emv]
[ti:请跟我来]
[ar:苏芮　虞戡平]
[al:搭错车]
[by:幻宇]
[url:qgwl/qgwl.wma]
[folder:qgwl/]
[bg:1.jpg]

[00:16.00]我踩着不变的步伐
[00:22.19]是为了配合你到来
[00:28.54]在慌张迟疑的时候
[00:35.25]请跟我来
[00:41.61]我带着梦幻的期待
[00:47.96]是无法按捺的情怀
[00:53.99]在你不注意的时候
[01:00.75]请跟我来
[02:19.69][01:10.00]别说什么
[02:26.59][01:16.28]那是你无法预知的世界
[02:35.14][01:24.51]别说　你不用说
[02:39.92][01:29.32]你的眼睛已经告诉了我
[02:52.20][01:42.24]当春雨飘呀飘的飘在
[02:58.74][01:48.41]你滴也滴不完的发梢
[03:04.82][01:54.53]戴着你的水晶珠链
[03:11.80][02:01.36]请跟我来

    </textarea>
    <span class="song_text" id="lrc">    </span>    </div>


<div class="song_r">
    <dl class="song_r_text">
       <dt style=" display:inline;"></dt>   <dt style="display:inline;" title=""></dt><br />
<dt style=" display:inline;"></dt>  <dt style=" display:inline;" title=""></dt>
    </dl>

</div>
</body>
<script src="js/dom_pub.js"></script>
<script src="js/moveDot.js"></script>
<script type="text/javascript" src="js/jquery-1.5.1.js"></script>
<script language="javascript">
//页面鼠标坐标和音量大小音量，0-100
var golbalX,golbalY,muteV;
var playMode =0;//播放模式 0：顺序 1：随机 2，单曲循环
var isPlay=0;//0:未播放 1：播放中
///////////////jquery.1.5.1///////////////////////
//自定义一个比较短快捷方式,使用jQuery
var $j = jQuery.noConflict();
$j(document).ready(function(e)
{
  document.onmousemove = function(e){
   var e = e ? e : event;
    golbalX = e.clientX ;
    golbalY = e.clientY ;

   }
  var timeFlag = 0;
  //鼠标经过上一首下一首按钮时，改变它的样式
  $j('.play_btn img').hover(function()
  {
   if("img_0" == this.id)
   {
    $j(this).attr("src","images/prve_h.png");
   }
   if("img_2" == this.id)
   {
    $j(this).attr("src","images/next_h.png");
   }

  },function()
  {
   if("img_0" == this.id)
   { clearTimeout(timeFlag);
    $j(this).attr("src","images/prve.png");
   }
   if("img_2" == this.id)
   { clearTimeout(timeFlag);
    $j(this).attr("src","images/next.png");
   }
  }).click(function()//点击动作
   {
    var self = this;
    //点击时改变前一首按钮样式
    if("img_0" == this.id)
    {
     $j(this).attr("src","images/prve_t.png");
     clearTimeout(timeFlag);
     timeFlag = setTimeout(function()
      {
       $j(self).attr("src","images/prve_h.png");

      },150);
    }
    //点击开始暂停按钮改变它样式
    if("img_1" == this.id)
    { //如果正在播放
     if(isPlay == 1)
     {
      isPlay = 0;
      $j(self).attr("src","images/pl_btn_puase.png");
      play();
     }
     //如果当前暂停
     else
     {
      isPlay = 1;
      $j(self).attr("src","images/pl_btn_play.png");
     }
    }
    //点击时改变下一首按钮样式
    if("img_2" == this.id)
    {
     $j(this).attr("src","images/next_t.png");
     clearTimeout(timeFlag);
     timeFlag = setTimeout(function()
      {
       $j(self).attr("src","images/next_h.png");
      },150);
    }
   }
  );

  //鼠标经过离开点击进度条时处理函数
  $j('#scroll_t_d_o').hover(function()
  {
   $j(this).children("div").stop(true,true).fadeIn(600);
  },function()
  {
   $j(this).children("div").stop(true,true).fadeOut(600);
  }
  ).click(function()
  {
   moveDiv(this.id,'scroll_t_d_i',2);
  }
  );
  //鼠标点击音量条时处理
  $j('#voic_d_o').click(function()
  {
   MediaPlayer.settings.volume =0;
   //alert('音量:'+MediaPlayer.settings.volume);
   moveDiv(this.id,'voic_d_i',3);
  }
  );
  //鼠标点击音量按钮时处理
  $j('#voiceBtn').click(function()
  {
   if($j(this).attr('src').indexOf('g_g.gif') > 0)
   {
    $j(this).attr('src','images/g.gif');
   }
   else
   {
    $j(this).attr('src','images/g_g.gif');
   }
  });
  //鼠标点击顺序播放按钮时处理
  $j("#order").click(function()
  {
   if(playMode != 0)
   { playMode = 0;
    removeBtnImg();
    $j(this).attr("src","images/x.gif");
   }

  }
  ).hover(function()
  {
   $j(this).attr("src","images/x.gif");
  },function()//这里要判断当前是什么播放模式
  {
   if(playMode != 0)
   {
    $j(this).attr("src","images/x.gif");
   }

  }
  );
  //鼠标点击随机播放按钮时处理
  $j("#random").click(function()
  {
   if(playMode != 1)
   { playMode = 1;
    removeBtnImg();
    $j(this).attr("src","images/h_h.gif");
   }

  }
  ).hover(function()
  {
   $j(this).attr("src","images/h_h.gif");
  },function()//这里要判断当前是什么播放模式
  {
   if(playMode != 1)
   {
    $j(this).attr("src","images/h.gif");
   }

  }
  );
    //鼠标点击单曲循环按钮时处理
  $j("#circle").click(function()
  {
   if(playMode != 2)
   {
    playMode = 2;
    removeBtnImg();
    $j(this).attr("src","images/y_h.gif");
   }

  }
  ).hover(function()
  {
   $j(this).attr("src","images/y_h.gif");
  },function()//这里要判断当前是什么播放模式
  {
   if(playMode != 2)
   {
    $j(this).attr("src","images/y.gif");
   }

  }
  );
  //鼠标拖动进度条和音量条
  moveDiv('scroll_t_d_o','scroll_t_d_i',0);
  moveDiv('voic_d_o','voic_d_i',1);

});

function add(str)
{
  $('f').innerHTML = "";
  $('f').innerHTML = str;
}

/*鼠标拖动时移动元素
**outDiv:外层元素
**inDiv:内层元素，被移动对象
**flag:0:播放条移动 1：音量条移动 2:点击滚动条移动滚动bar
*/
function moveDiv(outDiv,inDiv,flag){
  var container = $(outDiv);
  var ele = $(inDiv);
  var bodyWidth = container.offsetWidth,
  bodyHeight = container.offsetHeight;
  var maxX = bodyWidth - ele.offsetWidth - 10;
  //var maxY = bodyHeight - ele.offsetHeight - 10;
  if(flag==0 || flag==1 )
  {
   var dd = new Dragdrop(
   {
   target : ele,
   area : [0,maxX,0,0],//元素Y轴不移动
   callback : function(obj)
   {//typeof obj.moveX == 'number'
    if(flag==0)//拖动播放bar移动时回调处理
    {
     $('scroll_bg_id').style.width = obj.moveX+"px";
     add("obj.moveX="+obj.moveX);
    }if(flag==1)//拖动音量bar移动回调处理
    {
     $('voic_id').style.width = obj.moveX+"px";
     add("obj.moveX="+obj.moveX);
     mutePic(obj.moveX);
    }
   }
   });
  }
  var maxH = golbalX-container.offsetLeft;
  add("obj.moveX="+maxH);
  if(flag==2)//点击播放条处理
  {
   if(maxH>442)
   {
    maxH=442;
   }

   $('scroll_bg_id').style.width = maxH+"px";
   ele.style.left = maxH+"px";
  }
  if(flag==3)//点击音量条处理
  {
   if(maxH>122)
   {
    maxH=122;
   }
   mutePic(maxH);
   $('voic_id').style.width = maxH+"px";
   ele.style.left = maxH+"px";
  }

}

//静音 _num=0:静音，_num>0:改变音量大小
function mutePic(_num)
{
  if(_num == 0)
  {
   $j('#voiceBtn').attr('src','images/g_g.gif');
  }
  else
  {
   if($j('#voiceBtn').attr('src').indexOf('g_g.gif') > 0)
   {
    $j('#voiceBtn').attr('src','images/g.gif');
   }

  }
}

//---------
function removeBtnImg()
{
  $j('#order').attr('src',
  'images/x_h.gif');
  $j('#random').attr('src',
  'images/h.gif');
  $j('#circle').attr('src',
  'images/y.gif');
}

//////////////////////////////////////////////////////////////////////////////////////
//获取播放器对象
//var MediaPlayer=$("MediaPlayer");
//获取显示歌词DIV层
var lrc=$("lrc");
//offset余补时间
var offSet=0;
//调用播放歌曲
playSong('qgwl.wma');
var isIE = window.ActiveXObject;

//先调用判断是否是IE浏览器。
if(!isIE)
{
//alert('本播放器只支持IE，\n要想听到美妙的音乐，\n请用IE浏览器，\n且支持控件！');
alert('<%=RankTool.getAdminResourceInfo("info.admin_listenmusic_hint_1_0")%>'+'\n'+'<%=RankTool.getAdminResourceInfo("info.admin_listenmusic_hint_1_1")%>'+'\n'+'<%=RankTool.getAdminResourceInfo("info.admin_listenmusic_hint_1_2")%>'+'\n'+'<%=RankTool.getAdminResourceInfo("info.admin_listenmusic_hint_1_3")%>');
};

//获取对象
function $(name)
{
if (document.getElementById)
{
  return document.getElementById(name);
     }
else if(document.all)
{
   return document.all[name];
     }
     else
{
   return null;
     }
};

//播放歌曲，musicfilename:歌曲实体文件名,lrcfilename歌词文件名称
function playSong(musicfilename)
{
var sid=null;
var offSet=0;
//获取歌曲地址
//获取歌曲地址
MediaPlayer.FileName = musicfilename;

    lrc.scrollTop=0;
   //初始化装载歌词中....
   //lrc.innerHTML= '歌词载入中...' ;
    lrc.innerHTML= '歌词载入中...' ;

    if(sid)
    {
    clearInterval(sid);
    }

    var lrcText = echo_lrc();
if("" != lrcText)
{
  lrc.innerHTML = lrcText;
}
    else
    {
    //没有找到歌词...
    lrc.innerHTML= '没有找到歌词...';
    }

   //刷新歌词时间，越小，歌词越准确，但也占资源，1000表示1秒
   sid = setInterval("showLrc()",100);
   //setTimeout("MediaPlayer.Play()",100);

};

/////////////////////////////////////////////////////////////////////////////////////

var state;
var varb;
var varfullscreen=0;

function loop()
{
MediaPlayer.playCount=2;
}

function openfile()
{
            var fstr='';
            FileBtn.click();
            if (FileBtn.value=='')
            return;
            MediaPlayer.URL=FileBtn.value;
            playerinfo1.innerHTML = '全声道 ';
            playerinfo3.innerHTML="<b><font color=green>当前播放文件的路径和名称是: </font></b>"+FileBtn.value;
}

function playerinit()
{
MediaPlayer.url="001.mp3"; //定义你自己的文件
MediaPlayer.settings.autoStart = false ;
}

function play()
{
            //if(MediaPlayer.URL='')alert('请打开文件');return; onload="playerinit()"
            if (MediaPlayer.controls.isavailable('play'))
            {
                        MediaPlayer.controls.play();
                        state=setInterval("updatetime()",1000);
                        playerinfo.innerHTML = "播放"
                        varfullscreen=1;
                        playerinfo2.innerHTML = '音量:'+MediaPlayer.settings.volume;
            }
}

function pause()
{
            if (MediaPlayer.controls.isavailable('pause'))
            {
                        MediaPlayer.controls.pause();
                        clearInterval(state);
                        playerinfo.innerHTML = "暂停";
                        varfullscreen=1;
            }
}

function stop()
{
            if (MediaPlayer.controls.isavailable('stop'))
            {
                        MediaPlayer.controls.stop();
                        clearInterval(state);
                        playerinfo.innerHTML = "停止"
                        varfullscreen=0;
            }
}

function balance()
{
            switch (MediaPlayer.settings.balance)
            {
            case 0:
                        MediaPlayer.settings.balance = 100;
                        playerinfo1.innerHTML = '左声道 ';
                        break;
            case 100:
                        MediaPlayer.settings.balance = -100;
                        playerinfo1.innerHTML = '右声道 ';
                        break;
            case -100:
                        MediaPlayer.settings.balance = 0;
                        playerinfo1.innerHTML = '全声道 ';
                        break;
            default :
                        MediaPlayer.settings.balance = 0;
                        playerinfo1.innerHTML = '全声道 ';
                        break;
            }
}

function fullScreen()
{
            if(varfullscreen)
                        MediaPlayer.fullScreen='true';
            else
                        MediaPlayer.fullScreen='0';
}

</script>

</html>