如上图所示：为效果图

　　代码如下：

　　

<!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. alloc_skb申请函数分析

    alloc_skb()用于分配缓冲区的函数.由于"数据缓冲区"和"缓冲区的描述结构"(sk_buff结构)是两种不同的实体,这就意味着,在分配一个缓冲区时,需要 ...

  2. python --- 19 判断对象所属,区分函数和对象, 反射

    一.判断对象所属 isinstance, type , issubclass 1.issubclass(x,y)    判断x是否是y 的子类 2.type(x)  精准返回x 的数据类型 3.isi ...

  3. python --- 08 文件操作

    一.   文件 f = open(文件路径,mode = '模式',encoding = '编码格式') 1.基础 ① 读写时,主要看光标的位置 ②操作完成要写    f.close( ) f.flu ...

  4. CSS的进一步深入（更新中···）

    在之前我们学了6种选择器和三种CSS样式的引入,学习选择器就是为了更好的选择文本,学习CSS的引入是为了使文本增加各种样式和属性, 下面我们简单来学习一下为文本加样式和一些属性和属性值: 1.文本的样 ...

  5. MongoDB ReplicaSet 集群搭建

    说明 本文创建的集群的名字为test,在同一台机器上创建了三个mongo实例,端口不同即可. 安装mongodb的教程,之前总结过,请参考:CentOS安装MongoDB笔记 创建实例 # 本机默认原 ...

  6. 用原型封装一个操作DOM的例子

    <script> // 一句话 在构造函数里面写属性 在原型里面写方法 function Elem(d){ this.even=document.getElementById(d); } ...

  7. Python实现机器学习算法：EM算法

    ''' 数据集:伪造数据集(两个高斯分布混合) 数据集长度:1000 ------------------------------ 运行结果: ---------------------------- ...

  8. entity framework浅谈

    1. 什么是EF 微软提供的ORM工具. ORM让开发人员节省数据库访问代码的时间. 将更多的时间放在业务逻辑层面上. 开发人员使用linq语言, 对数据库进行操作. 2. EF的使用场景 EF有三种 ...

  9. mvc扩展HtmlHelper功能

    HtmlHelper详细介绍 简单示例 自定义HtmlHelper 解决: 直接写HTML的话如果语句有语法错误,如缺少结尾标记</b>,编译器不会报错,出来的页面可能会很乱且难以查出错误 ...

  10. 【.NET开发之美】使用ComponentOne提高.NET DataMap中的加载速度

    概述 FlexGrid for WinForm 采用了最新的数据绑定技术,并与Microsoft .NET Framework无缝集成. 因此,您可以获得易于使用的灵活网格控件,用于创建用户友好界面, ...