如上图所示：为效果图

　　代码如下：

　　

<!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>
<script src="js/sy.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
　　body,
　　* {
　　　　padding: 0;
　　　　margin: 0;
　　}
　　.m-main {
　　　　width: 100%;
　　　　height: 100%;
　　　　background: url(img/play_bg.png) 0 0 no-repeat;
　　　　-webkit-background-size: 100% 100%;
　　　　background-size: 100% 100%;
　　　　position: relative;
　　}

　　.m-main video {
　　　　display: none;
　　}

　　.m-main .player {
　　　　width: 100%;
　　　　height: 3.0rem;
　　　　position: relative;
　　　　bottom: 0px;
　　}

　　#js-play{
　　　　display: block;
　　　　width: 1.2rem;
　　　　height: 1.5rem;
　　　　margin: 0 auto;
　　　　color: #FFF;
　　　　text-align: center;
　　　　position: absolute;
　　　　left: 1.0rem;
　　　　top: 0;
　　　　display: block;
　　}
　　#js-pause{
　　　　display: block;
　　　　width: 1.2rem;
　　　　height: 1.5rem;
　　　　margin: 0 auto;
　　　　color: #FFF;
　　　　text-align: center;
　　　　position: absolute;
　　　　left: 1.0rem;
　　　　top: 0;
　　　　display: none;
　　}
　　#js-play #js-pause img{
　　　　width: 100%;
　　}
　　.m-main .play-box {
　　　　width: 100%;
　　　　margin-left: 3.8rem;
　　}

　　.m-main .play-box .left {
　　　　width: 25.6rem;
　　　　float: left;
　　}
　　.m-main .play-box .left p.timeline {
　　　　width: 20.0rem;
　　　　/*width: 70%;*/
　　　　height: 4px;
　　　　background-color: rgba(256, 256, 256, 0.6);
　　　　border-radius: 5px;
　　　　margin-top: 1.2rem;
　　　　margin-left: 3.0rem;
　　　　position: relative;
　　　　z-index: 2;
　　}
　　.m-main .play-box .left p.timeline span {
　　　　position: relative;
　　　　width: 0px;
　　　　height: 4px;
　　　　background-color: #ec6538;
　　　　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: -5px;
　　　　right: -0.6rem;
　　　　width: 1.2rem;
　　　　height: 1.2rem;
　　　　border-radius: 50%;
　　　　background-color: #ec6538;
　　}
　　.m-main .play-box .left div.info {
　　　　height: 26px;
　　　　font-size: 0.8rem;
　　　　color: #ffffff;
　　　　position: relative;
　　　　top: -0.65rem;
　　　　z-index: 1;

　　}
　　.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">
　　　　　　<img src="img/play.png"/>
　　　　</a>
　　　　<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" id="js-pause">
　　　　　　<img src="img/stop.png"/>
　　　　</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">
　　　　<audio 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">
　　　　</audio>
　　</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 + "%"
　　　　　　　　　　　　})
　　　　　　　　　　});
　　　　　　　　　　// 播放
　　　　　　　　　　$("#js-play").on('click', function() {
　　　　　　　　　　　　alert("播放")
　　　　　　　　　　　　$(this).hide();
　　　　　　　　　　　　$('#js-pause').show();
　　　　　　　　　　　　audio.play()
　　　　　　　　　　});
　　　　　　　　　　　　// 暂停
　　　　　　　　　　$('#js-pause').on('click',function() {
　　　　　　　　　　　　alert("暂停")
　　　　　　　　　　　　$(this).hide();
　　　　　　　　　　　　$('#js-play').show();
　　　　　　　　　　　　　　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>

说明：直接拷贝可用，这个是移动端的进度条，拷贝下来需要做处理的就是里面有个背景图，css中你可以看到，替换成你的就ok,

　　　还有个sy.js这个是移动端rem适配的js，如需要的话请看前面的一篇博客！！好！就这样！！

audio进度条的更多相关文章

  1. h5 audio进度条

    h5 audio 播放进度条 效果图: html部分: <div class="audiojindu"> <div class="playcontrol ...

  2. h5 audio播放问题，audio获取缓存进度条

    <!--全局 audio --> <audio id="audio" @playing="audioReady" @timeupdate=&q ...

  3. Flex4/Flash多文件上传(带进度条)实例分享

    要求 必备知识 本文要求基本了解 Adobe Flex编程知识和JAVA基础知识. 开发环境 MyEclipse10/Flash Builder4.6/Flash Player11及以上 演示地址 演 ...

  4. ajax 异步上传视频带进度条并提取缩略图

    最近在做一个集富媒体功能于一身的项目.需要上传视频.这里我希望做成异步上传,并且有进度条,响应有状态码,视频连接,缩略图. 服务端响应 { "thumbnail": "/ ...

  5. js---手机端滑动进度条

    最近做项目,有一个滑动音乐播放进度条的效果,但是使用input的 range 来做会出现一些问题,想了想还是用JS来写.直接上代码: <!doctype html> <html la ...

  6. MediaPlayer音乐播放器、上一首、下一首、播放、停止、自动下一首、进度条

    本文介绍MediaPlayer的使用.MediaPlayer可以播放音频和视频,另外也可以通过VideoView来播放视频,虽然VideoView比MediaPlayer简单易用,但定制性不如用Med ...

  7. iOS_文件上传进度条的实现思路-AFNettworking

    iOS_文件上传进度条的实现思路-AFNettworking //要上传的文件名,在这里我使用当前日期做为文件的名称 NSString * fileName =[NSString stringWith ...

  8. Html5中 视频 音频标签 进度条问题

    最近项目中使用Html5的video和audio标签来在线播放视频和音频文件,但是遇到个奇葩的问题,页面上播放之后进度条无效, 查看w3c之后发现html代码并没有什么不同,之后猜想如果用静态的htm ...

  9. vue-music 关于Player （播放器组件）--播放和进度条

    迷你播放器 1.播放器组件会在各个页面的情况下会打开. 首先在vuex state.js 中定义全局的播放器状态 import {playMode} from 'common/js/config.js ...

随机推荐

  1. Summarization of Tech Interviews

    Summarization of Tech Interviews(技术面试总结) 手心网(2015) Q1. 解释一下 TCP/IP 协议之滑动窗口? 滑动窗口协议的维基:https://en.wik ...

  2. linux普通用户提权

    tar通配符注入. echo 'echo "chenglee ALL=(root) NOPASSWD: ALL" > /etc/sudoers' > demo.sh e ...

  3. Oracle redo/undo 原理理解

    一. 什么是redo(用于重做数据) redo也就是重做日志文件(redo log file),Oracle维护着两类重做日志文件:在线(online)重做日志文件和归档(archived)重做日志文 ...

  4. Ymodem协议(参考STM32)

    相信很多人都希望,不开盖就可以对固件进行升级吧,就像手机那些.下文中的bootload就来实现这样的功能. 前段时间有项目关于Bootload设计.所以就仔细的去了研究了一翻.以前都是用的stm32官 ...

  5. Ubuntu + CUDA9 + CUDNN7 + OpenCV3.4 + contrib +CAFFE-master

    安装ubuntu时赞美Rufus(建议ubuntu16.04.04),过程参考 https://www.cnblogs.com/willnote/p/6725594.html 安 装 前 一 定 要 ...

  6. weblogic10以下，许可证过期解决办法

    weblogic10以后的版本已经不再使用license.bea的方式来进行软件授权,之前的历史版本oracle提供了一个免费的许可证更新. 1.首先进入oracle的官网下载地址http://www ...

  7. Eclipse的Servers视图中无法添加Tomcat

    问题:Eclipse的Servers视图中无法添加Tomcat,其中ServerName是被置为灰色的,无法编辑,如下图所示: 解决步骤: 关闭Eclipse 找到Eclipse的工作区间,这里假设命 ...

  8. java 静态代理总结

    首先:定义一个抽象类或借口 例: package JingTai; public interface JingTai1 { public void show(); } 接着:定义一个被代理的类,他需要 ...

  9. 修改userdata的分区大小【转】

    本文转载自:https://blog.csdn.net/mike8825/article/details/49833833 版权声明:本文为博主原创文章,未经博主允许不得转载.    https:// ...

  10. Web Service平台有三种元素构成：SOAP、WSDL、UDDI。区别和联系

    Web Service平台有三种元素构成:SOAP.WSDL.UDDI.一个消费者可以在UDDI注册表查找服务,取得服务的WSDL描述,然后通过SOAP来调用服务.SOAP.WSDL.UDDI的区别如 ...