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 相关文章推荐
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
Jul 29 Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
jQuery中on()方法用法实例详解
Feb 06 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
Jan 09 Javascript
原生js实现瀑布流布局
Mar 08 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
微信小程序onLaunch异步,首页onLoad先执行?
Sep 20 Javascript
JavaScript使用表单元素验证表单的示例代码
Aug 20 Javascript
vue使用原生swiper代码实例
Feb 05 Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 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的数组总结【经验】
2016/05/05 PHP
php fread读取文件注意事项
2016/09/24 PHP
input 高级限制级用法
2009/03/26 Javascript
JavaScript定义类或函数的几种方式小结
2011/01/09 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
vue input实现点击按钮文字增删功能示例
2019/01/29 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
vue实现拖拽效果
2019/12/23 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
内勤主管岗位职责
2014/04/03 职场文书
2014年食堂工作总结
2014/11/20 职场文书
放弃继承权公证书
2015/01/23 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
webpack的移动端适配方案小结
2021/07/25 Javascript
mysql分表之后如何平滑上线详解
2021/11/01 MySQL
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js