html音乐播放器进度条同步,网页音乐播放器完整版特效,自行控制,带进度条...
//---------这是区分播放器的音乐类型,你可以填加修改------//
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音乐播放器进度条同步,网页音乐播放器完整版特效,自行控制,带进度条...相关推荐
- 9277计算机音乐,抖音9277伴奏深七演唱的歌曲完整版分享_9277背景音乐mp3原声版...
拍摄抖音视频的时候,大家都会在最后给视频添加上一段背景音乐,当然有的比较有才华的朋友就会直接使用自己的原声!视频火了之后,其他用户就会使用她的背景音乐来创作视频哦!最近就有一位你要我怎么说我怎么做你才 ...
- 如果摄像头不支持Web Socket,猿大师播放器还能在网页中播放RTSP流吗?
问: 我们的情况比较复杂,摄像头设备品牌和数量都比较多,分布在全国各地都有,地点分布比较广泛,有的甚至是比较老的型号,如果摄像头设备不支持Web Socket,猿大师播放器还可以在网页中播放RTSP流 ...
- java mvc上传文件进度_java相关:springMVC+ajax实现文件上传且带进度条实例
java相关:springMVC+ajax实现文件上传且带进度条实例 发布于 2020-7-5| 复制链接 本篇文章主要介绍了springMVC+ajax实现文件上传且带进度条实例,具有一定的参考价值 ...
- html背景音乐播放与暂停,js控制网页背景音乐播放与停止的方法
本文实例讲述了js控制网页背景音乐播放与停止的方法.分享给大家供大家参考.具体实现方法如下: js控制背景音乐bgsound的方法(开始与停止) var bg_sound=document.creat ...
- 使用html+jquery+本地的音乐文件实现了基本的网页音乐播放器
在学习前端的路上,跟着教程做了一个不需要什么js的web端音乐播放器 代码结构如下: 点我下载jquery-3.3.1.js <!-- demo.html --> <!DOCTYPE ...
- 易企秀手机html5场景源码,仿易企秀V15.1手机网页DIY制作工具完整版开源版源码修复采......
源码介绍: 源码内附详细安装文档,可轻松搭建网站. 易企秀是一款针对移动互联网营销的手机网页DIY制作工具,用户可以编辑手机网页,分享到社交网络,通过报名表单收集潜在客户或其他反馈信息.用户通过易企秀 ...
- 静态网页-猫眼电影首页完整版(附源码)
猫眼电影首页效果与回顾 效果 分析 我全部写完打开的时候,感觉快要分不清了都那个是官网了都.用了两个CSS3的知识点,一个是标题栏里小三角旋转的效果,一个是电影名字下的渐变背景. 我花了很长时间写这个 ...
- 摄像头网页服务器,网络摄像头实现直播的方法 在网页浏览器播放等于可以在网页传播...
网络摄像头实现直播的方法,可以在网页浏览器播放,可以发送给你的朋友,可以放到你的官网去增加一条播放链接,可以在网页文章里增加一条播放链接.怎么实现呢? 需要的准备如下: 1.网络摄像头一个 2.电脑一 ...
- 微信小程序下载视频到相册(带进度条)
微信小程序下载视频到相册,并带进度条 <button class="desc-note my-button u-font-32" @click="toUpload( ...
最新文章
- linux apache2.4 php,php5.6+apache2.4+linux如何搭建php环境
- nyoj985带通配符的数
- 区块链(1)——以太坊下载安装(我营销?营销个屁)
- Android-Activity启动流程
- 【渝粤题库】陕西师范大学164202 市场营销学 作业(专升本)
- 工作173:一级控制二级菜单的变化
- query builder python-elasticsearch返回指定字段
- 拓端tecdat|R语言用泊松Poisson回归、GAM样条曲线模型预测骑自行车者的数量
- 30分钟 带你浅入seajs源码
- RS232、RS485标准以及在DB9公头、母头上的接线定义
- opencv自适应二值化的应用
- 【报告分享】2021年自驾游数据报告-马蜂窝旅游(附下载)
- DHCP snoop配置
- Windows XP安装sql2000企业版的办法
- Android跳转到应用商店详情页面
- 关于MAC地址修改和扩展以太网
- PHP获取客户端访问的IP来源
- oracle数据库权限
- Android 对整张图片打马赛克
- oracle exp 无效dblink,【案例】Oracle dblink 数据库连接dblink insert插入数据时异常分析...
热门文章
- 华硕笔记本台式机安装系统
- 先锋M.2 NVMe 2280 SSD 256GB固态硬盘 测速
- kvaser怎么用?Kvaser 汽车CAN通讯协议总线分析仪新手常见入门问题解决方案教程
- win7安装office2007失败
- css如何让背景上下居中显示,CSS有哪些方式可以实现垂直居中?
- 物权法全文内容有哪些呢-广告外链_萍乡凤凰网广告哪家好,优酷竞价_一帆创众网络...
- 软件测试-按测试阶段/对象/测试手段分类
- qt:tcp通信工具(Client篇)
- ‘XXX‘ is declared but its value is never read.
- JAVA两个表相关联_关于Java:如何将多对多关联映射到映射到两个不同表的类?...