音乐进度条，话说我好久不研究技术了……

最新推荐文章于 2024-08-25 09:57:22 发布

xxuu503

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量560

点赞数

文章标签：音乐 function javascript div html filter

本文链接：https://blog.csdn.net/xxuu503/article/details/3123290

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=GB2312">
<META content="MSHTML 6.00.2900.3354" name=GENERATOR>
<style type="text/css">
.progressBar { padding-top: 5px; }
.progressBarBox { width: 350px; height: 20px; border: 1px inset; background: #eee;}
.progressBarBoxContent {position:relative; width: 0; top: -20px; border-right: 1px solid #444; background: #9ACB34; filter:Alpha(opacity=70);}
</style>
<object id="player" height="64" width="260" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" style="display:none">
</object>
<SCRIPT LANGUAGE="JavaScript">
<!--
/* Licence:
*   Use this however/wherever you like, just don't blame me if it breaks anything.
*
* Credit:
*   If you're nice, you'll leave this bit:
*
*   Class by Pierre-Alexandre Losson -- http://www.telio.be/blog
*   email : plosson@users.sourceforge.net
*/
var GetE=document.getElementById;

var Player=function(filename,url)
{
  this.FileName=filename;
  this.text=null;
  this.bar=null;
  this.Url=url;
  this.interVal=null;
  this.Root=null;
}

Player.prototype.Instance=null;

Player.prototype.player=GetE("player");

Player.prototype.Create=function()
{
Player.prototype.Instance=this;

  var root=document.createElement("DIV");
  root.className="progressBar";
  root.οnclick=this.Play;

var leaf=document.createElement("DIV");
root.appendChild(leaf);

  this.text=document.createElement("DIV");
  this.text.className="progressBarBox";
  this.text.innerText=this.FileName;
  leaf.appendChild(this.text);

  this.bar=document.createElement("DIV");
  this.bar.className="progressBarBoxContent";
  leaf.appendChild(this.bar);

document.body.appendChild(root);
this.Root=root;
}

Player.prototype.Play=function()
{
  Player.prototype.Instance.Root.οnclick=Player.prototype.Instance.Pause;
  Player.prototype.Instance.player.controls.stop();
  Player.prototype.Instance.player.url=Player.prototype.Instance.Url;
  Player.prototype.Instance.player.controls.play();
  var test=window.setInterval(Player.prototype.Instance.Progress,100);
  Player.prototype.Instance.interVal=test;
  Player.prototype.Instance.player.onPlayStateChange=new function()
  {
   if(Player.prototype.Instance.player.PlayState==1)
   {
    window.clearInterval(Player.prototype.Instance.interVal);
   }
  };
}

Player.prototype.Pause=function()
{
Player.prototype.Instance.Root.οnclick=Player.prototype.Instance.RePlay;
Player.prototype.Instance.player.controls.pause();
}

Player.prototype.RePlay=function()
{
Player.prototype.Instance.player.controls.play();
}

Player.prototype.Progress=function()
{
  var a=Player.prototype.Instance.player.controls.currentPosition;
  var b=Player.prototype.Instance.player.currentMedia.duration;
  if (b>a)
  {
   var progressPercent = Math.ceil((a / b) * 100);
   Player.prototype.Instance.bar.style.width = parseInt(progressPercent * 3.5) + "px";
  }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</BODY>
</HTML>

xxuu503

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
音乐进度条，话说我好久不研究技术了……

.progressBar { padding-top: 5px; } .progressBarBox { width: 350px; height: 20px; border: 1px inset; background: #eee;} .progressBarBoxContent {position:relative; width: 0; top: -20px; border-right: 1
复制链接

扫一扫