如上图所示：为效果图

　　代码如下：

　　

<!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. fjwc2019 D6T1 堆（组合数+打表）

    #193. 「2019冬令营提高组」堆 但是每个点都遍历一遍,有些点的子树完全相同却重复算了 忽然记起完全二叉树的性质之一:每个非叶节点的子树中至少有一个是满二叉树 那么我们预处理满二叉树的那一块,剩 ...

  2. Java中的Volatile和synchronized的区别

    Synchronized和Volatile四个不同点: 1.粒度不同,前者锁对象和类 ,后者针对变量2.syn阻塞,volatile线程不阻塞3.syn保证三大特性,volatile不保证原子性4.s ...

  3. TCP 之 RST 原因分析

    5. 往一个对端已经关闭的套接字上写入数据会收到一个RST信号 1.发送端的 发送缓冲区还有数据,但接收端tcp的接收通道已关闭 2. SYN到达某端口但此端口上没有正在监听的服务器.对于UDP,当一 ...

  4. MacOS Docker 安装

    使用 Homebrew 安装 macOS 我们可以使用 Homebrew 来安装 Docker. Homebrew 的 Cask 已经支持 Docker for Mac,因此可以很方便的使用 Home ...

  5. kali linux 数据库分析工具简述

    bbqsql SQL盲注可能很难被利用. 当可用的工具工作时,它们运行良好,但是当它们不工作时,您必须编写自定义的东西. 这是耗时且乏味的. BBQSQL可以帮助你解决这些问题. BBQSQL是一个用 ...

  6. python --- 15 装饰器

    装饰器 一.原则,目的 开闭原则: 对功能的扩展开放,对代码的修改是封闭的(不可修改的)    目的:在目标函数前或后插入一段新的代码,不改变源代码 二.装饰器的通用语法 三.多个装饰器修饰同一个函数 ...

  7. fastjson常用方法

    fastjson是一款alibaba公司开发的json工具包.json经常被使用在数据传输方面,因此特意对它的一些常用方法做备注,欢迎看客在评论区补充或指出问题. 首先定义一个实体类,用于我们进行对象 ...

  8. .NET BackgroundWorker的一般使用方式

    代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data ...

  9. shell 编程中的 知识点 - 突然一下子就明白很多东西了

    按自己的意愿生活, 而且是::: 要敢于按自己的意志去活! 那是一种胆量和勇气!! shell中的结构, 只有选择(实际上if条件也是一种选择结构)和循环, 都是用关键字来替代 大括号的. 如: if ...

  10. 如何使用thinkphp的model来验证前端表单?

    为了增加安全性, 在向model表中写入和修改数据时, 最好是调用 create方法来保证安全, 然后再调用add和save方法: if($Model->Validate($validate)- ...