WWW.51JS.COM---[94OK]

//---------这是区分播放器的音乐类型,你可以填加修改------//

var RS = new Array("rm","ram","mp3","ra","asf","rp","rmm","png","m3u","mp2","mpa");

//-----------播放器状态-------------//

var Rstate = new Array("停止","连接","缓冲","播放","暂停");

var player_doing = false;

function choose_player(sound_path)

{

sound_path = sound_path.split(".");

var sound_type = sound_path[sound_path.length-1].toLowerCase();

for(i=0;i

{

if(sound_type==RS[i])

return "R"

}

return "U";

}

function Do_play()

{

var the_player = document.getElementById("player");

the_player.DoPlay();

}

function Do_pause()

{

var the_player = document.getElementById("player");

the_player.DoPause();

}

function Do_stop()

{

var the_player = document.getElementById("player");

the_player.DoStop();

}

function Set_position(num)

{

var the_player = document.getElementById("player");

the_player.SetPosition(num);

}

function Get_position()

{

var the_player = document.getElementById("player");

return the_player.GetPosition();

}

function Get_length()

{

var the_player = document.getElementById("player");

return the_player.GetLength();

}

function Set_volume(num)

{

var the_player = document.getElementById("player");

the_player.SetVolume(num);

}

function Show_time(num)

{

var time_minute = Math.floor( num / 60000 );

var time_second = Math.floor( ( num - time_minute*60000 ) / 1000 );

if( time_minute < 10 )

time_minute = "0" + time_minute;

if( time_second < 10 )

time_second = "0" + time_second;

return (time_minute + ":" +time_second);

}

function Get_state()

{

var the_player = document.getElementById("player");

return the_player.GetPlayState();

}

function player_play()

{

var just_type = choose_player(document.getElementById("sound_path").value);

var the_player = document.getElementById("player");

var the_state = Get_state();

if(the_state==1||the_state==2||the_state==3)

{

return;

}

if(the_state==4)

{

Do_play();

}

if(the_state==0)

{

if(just_type=="R")

{

Do_stop();

the_player.SetSource(document.getElementById("sound_path").value);

Do_play();

if(player_doing)

{

clearInterval(player_doing)

}

player_doing = setInterval("Set_all()",500);

}

}

}

function Set_all()

{

var the_player = document.getElementById("player");

document.getElementById("position_box").value = Show_time(Get_position());

document.getElementById("length_box").value = Show_time(Get_length());

document.getElementById("state_box").value = Rstate[Get_state()];

var the_max = (document.getElementById("position_button_box").offsetWidth - document.getElementById("position_button").offsetWidth);

document.getElementById("position_button").style.pixelLeft = Math.round(the_max*Get_position()/Get_length());

if(Get_state()==0)

{

clearInterval(player_doing);

}

}

function Go_direction(num)

{

var the_player = document.getElementById("player");

var the_state = Get_state();

if(the_state==3)

{

var the_direction = num*1000;

var judger = (Get_position() + the_direction)

if(judger>=0&&judger<=Get_length())

{

Set_position(judger);

}

}

}

var Ox,Nx;

var move_obj_can_move = false;

var move_obj = false;

function start_move()

{

move_obj_can_move = true;

move_obj = event.srcElement.id;

document.getElementById(move_obj).setCapture();

Ox = event.clientX;

}

function document.onmouseup()

{

if(!move_obj)

return;

document.getElementById(move_obj).releaseCapture();

move_obj_can_move = false;

move_obj = false;

}

function document.onmousemove()

{

if(!document.getElementById(move_obj))

{

return;

}

if(move_obj=="position_button"&&Get_state()!=3)

{

return;

}

Nx = event.clientX;

var judger = document.getElementById(move_obj).style.pixelLeft + Nx - Ox;

var max = document.getElementById(move_obj+"_box").offsetWidth - document.getElementById(move_obj).offsetWidth;

if(!move_obj_can_move||!move_obj||judger>max||judger<0)

{

return;

}

document.getElementById(move_obj).style.pixelLeft += Nx - Ox;

eval(move_obj+"_event("+document.getElementById(move_obj).style.pixelLeft+","+max+")");

Ox = Nx;

}

function volume_button_event(s_num,b_num)

{

var judger = Math.round(100*s_num/b_num)

if(judger>=0&&judger<=100)

{

Set_volume(judger)

}

}

function position_button_event(s_num,b_num)

{

var judger = Math.round(Get_length()*s_num/b_num);

if(judger>=0||judger<=Get_length())

{

Set_position(judger)

}

}

STATE:

POSITION: LENGTH:

html音乐播放器进度条同步,网页音乐播放器完整版特效,自行控制,带进度条...相关推荐

  1. 9277计算机音乐,抖音9277伴奏深七演唱的歌曲完整版分享_9277背景音乐mp3原声版...

    拍摄抖音视频的时候,大家都会在最后给视频添加上一段背景音乐,当然有的比较有才华的朋友就会直接使用自己的原声!视频火了之后,其他用户就会使用她的背景音乐来创作视频哦!最近就有一位你要我怎么说我怎么做你才 ...

  2. 如果摄像头不支持Web Socket,猿大师播放器还能在网页中播放RTSP流吗?

    问: 我们的情况比较复杂,摄像头设备品牌和数量都比较多,分布在全国各地都有,地点分布比较广泛,有的甚至是比较老的型号,如果摄像头设备不支持Web Socket,猿大师播放器还可以在网页中播放RTSP流 ...

  3. java mvc上传文件进度_java相关:springMVC+ajax实现文件上传且带进度条实例

    java相关:springMVC+ajax实现文件上传且带进度条实例 发布于 2020-7-5| 复制链接 本篇文章主要介绍了springMVC+ajax实现文件上传且带进度条实例,具有一定的参考价值 ...

  4. html背景音乐播放与暂停,js控制网页背景音乐播放与停止的方法

    本文实例讲述了js控制网页背景音乐播放与停止的方法.分享给大家供大家参考.具体实现方法如下: js控制背景音乐bgsound的方法(开始与停止) var bg_sound=document.creat ...

  5. 使用html+jquery+本地的音乐文件实现了基本的网页音乐播放器

    在学习前端的路上,跟着教程做了一个不需要什么js的web端音乐播放器 代码结构如下: 点我下载jquery-3.3.1.js <!-- demo.html --> <!DOCTYPE ...

  6. 易企秀手机html5场景源码,仿易企秀V15.1手机网页DIY制作工具完整版开源版源码修复采......

    源码介绍: 源码内附详细安装文档,可轻松搭建网站. 易企秀是一款针对移动互联网营销的手机网页DIY制作工具,用户可以编辑手机网页,分享到社交网络,通过报名表单收集潜在客户或其他反馈信息.用户通过易企秀 ...

  7. 静态网页-猫眼电影首页完整版(附源码)

    猫眼电影首页效果与回顾 效果 分析 我全部写完打开的时候,感觉快要分不清了都那个是官网了都.用了两个CSS3的知识点,一个是标题栏里小三角旋转的效果,一个是电影名字下的渐变背景. 我花了很长时间写这个 ...

  8. 摄像头网页服务器,网络摄像头实现直播的方法 在网页浏览器播放等于可以在网页传播...

    网络摄像头实现直播的方法,可以在网页浏览器播放,可以发送给你的朋友,可以放到你的官网去增加一条播放链接,可以在网页文章里增加一条播放链接.怎么实现呢? 需要的准备如下: 1.网络摄像头一个 2.电脑一 ...

  9. 微信小程序下载视频到相册(带进度条)

    微信小程序下载视频到相册,并带进度条 <button class="desc-note my-button u-font-32" @click="toUpload( ...

最新文章

  1. linux apache2.4 php,php5.6+apache2.4+linux如何搭建php环境
  2. nyoj985带通配符的数
  3. 区块链(1)——以太坊下载安装(我营销?营销个屁)
  4. Android-Activity启动流程
  5. 【渝粤题库】陕西师范大学164202 市场营销学 作业(专升本)
  6. 工作173:一级控制二级菜单的变化
  7. query builder python-elasticsearch返回指定字段
  8. 拓端tecdat|R语言用泊松Poisson回归、GAM样条曲线模型预测骑自行车者的数量
  9. 30分钟 带你浅入seajs源码
  10. RS232、RS485标准以及在DB9公头、母头上的接线定义
  11. opencv自适应二值化的应用
  12. 【报告分享】2021年自驾游数据报告-马蜂窝旅游(附下载)
  13. DHCP snoop配置
  14. Windows XP安装sql2000企业版的办法
  15. Android跳转到应用商店详情页面
  16. 关于MAC地址修改和扩展以太网
  17. PHP获取客户端访问的IP来源
  18. oracle数据库权限
  19. Android 对整张图片打马赛克
  20. oracle exp 无效dblink,【案例】Oracle dblink 数据库连接dblink insert插入数据时异常分析...

热门文章

  1. 华硕笔记本台式机安装系统
  2. 先锋M.2 NVMe 2280 SSD 256GB固态硬盘 测速
  3. kvaser怎么用?Kvaser 汽车CAN通讯协议总线分析仪新手常见入门问题解决方案教程
  4. win7安装office2007失败
  5. css如何让背景上下居中显示,CSS有哪些方式可以实现垂直居中?
  6. 物权法全文内容有哪些呢-广告外链_萍乡凤凰网广告哪家好,优酷竞价_一帆创众网络...
  7. 软件测试-按测试阶段/对象/测试手段分类
  8. qt:tcp通信工具(Client篇)
  9. ‘XXX‘ is declared but its value is never read.
  10. JAVA两个表相关联_关于Java:如何将多对多关联映射到映射到两个不同表的类?...