js实现音频控制进度条功能


Posted in Javascript onApril 01, 2017

效果图:

js实现音频控制进度条功能

代码如下:

<!doctype html>
<html>
<head>
<meta name="author" content="dony">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
<meta name="renderer" content="webkit">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>音频控制进度条</title>
<style type="text/css">

body,div{padding: 0;margin: 0;}
.m-main{width:560px; height: 100%; margin: 3% auto; background-color:#30a5ff;}
.m-main video{display: none; }
.m-main .player {
  width: 100%;
  height: 150px;
  position: relative;
  bottom: 0px;
}
.m-main .player>a{display: inline-block; width: 20%; margin: 0 auto; padding: 5%; color: #FFF; text-align: center;}
.m-main .play-box {
  width: 100%;
  margin: 0 auto;
}

.m-main .play-box .left {
  width: 100%;
  float: left;
}

.m-main .play-box .left p.timeline { width: 70%;height: 10px; background-color: rgba(216, 216, 216, 0.5); border-radius: 5px; margin:30px auto 0; position: relative; z-index: 2; }
.m-main .play-box .left p.timeline span {position: relative; width: 0px; height: 10px; background-color: #FFF; border-radius: 5px; display: block; -webkit-transition: width ease-out 0.3s;-o-transition: width ease-out 0.3s;transition: width ease-out 0.3s;}
.m-main .play-box .left p.timeline span:after{content: ""; position: absolute; top: -4px; right:-0.6rem;width: 1.2rem; height:1.2rem; border-radius: 50%;background-color: #FFF;}
.m-main .play-box .left div.info { height: 26px; line-height: 26px; font-size: 14px; color: #000; position: relative; top: -18px; margin:0 10px; z-index: 1;color: #FFF;}
.m-main .play-box .left div.info .size { float: left; display: block;}
.m-main .play-box .left div.info .timeshow { float: right; display: block;}
</style>
</head>
<body>
<div class="m-main">
  <div class="player">
   <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" id="js-play">播放</a>
   <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" id="js-pause">暂停</a>
    <div class="play-box">
      <div class="left">
        <p class="timeline"><span style=""></span></p>
        <div class="info">
          <span class="size">00:00</span>
          <span class="timeshow">00:00</span>
        </div>
      </div>
    </div>
  </div>
 <div class="video">
 <video controls autoplay name="media" id="js-video"><source src="http://chipsguide.snaillove.com/Public/Uploads/file_server_storage/Audio/2017/03/23/19/192_20003137.mp3" type="video/mp4"></video>
 </div>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
   AudioControl('js-video')
   function AudioControl(id){
     // 音频控制进度条
     var audio = document.getElementById(id);
     $(audio).on('loadedmetadata',function(){
    audio.pause();
    // 进度条控制
     $(document).on('touchend','.timeline',function(e){
       var x = e.originalEvent.changedTouches[0].clientX-this.offsetLeft;
       var X = x < 0 ? 0 : x ;
       var W = $(this).width();
       var place = X > W ? W : X;
       audio.currentTime = (place/W).toFixed(2)*audio.duration
       $(this).children().css({width:(place/W).toFixed(2)*100+"%"})
     });
     // 播放
    $(document).on('click','#js-play',function(){
    audio.play()
    });
    // 暂停
    $(document).on('click','#js-pause',function(){
    audio.pause()
    });
     })
     setInterval(function () {
       var currentTime = audio.currentTime;
       setTimeShow(currentTime);
     }, 1000);
     // 设置播放时间
   function setTimeShow(t) {
     t = Math.floor(t);
     var playTime = secondToMin(audio.currentTime);
     $(".size").html(playTime);
     $('.timeshow').text(secondToMin(audio.duration))
     $('.timeline').children().css({width:(t/audio.duration).toFixed(4)*100+"%"})
   }
     // 计算时间
   function secondToMin(s) {
     var MM = Math.floor(s / 60);
     var SS = s % 60;
     if (MM < 10)
       MM = "0" + MM;
     if (SS < 10)
       SS = "0" + SS;
     var min = MM + ":" + SS;
     return min.split('.')[0];
   }
   }
  })
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Jquery中children与find之间的区别详细解析
Nov 29 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
javaScript实现复选框全选反选事件详解
Nov 20 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 Javascript
JavaScript如何实现图片处理与合成
May 29 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
Apr 01 #Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 #Javascript
原生JS实现九宫格抽奖效果
Apr 01 #Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 #Javascript
ES6 Promise对象概念与用法分析
Apr 01 #Javascript
JavaScript中闭包的详解
Apr 01 #Javascript
基于JavaScript实现验证码功能
Apr 01 #Javascript
You might like
用PHP 4.2书写安全的脚本
2006/10/09 PHP
ADODB的数据库封包程序库
2006/12/31 PHP
PHP获取http请求的头信息实现步骤
2012/12/16 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
关于document.cookie的使用javascript
2008/04/11 Javascript
javascript this用法小结
2008/12/19 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
深入理解Node.js中通用基础设计模式
2017/09/19 Javascript
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
讲解Python中运算符使用时的优先级
2015/05/14 Python
使用python为mysql实现restful接口
2018/01/05 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
Python测试线程应用程序过程解析
2019/12/31 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
机电一体化大学生求职信
2013/11/08 职场文书
2014年庆元旦活动方案
2014/02/15 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
繁星春水读书笔记
2015/06/30 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
四年级语文教学反思
2016/03/03 职场文书