如上图所示：为效果图

　　代码如下：

　　

<!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. go 字符串反转（倒序）

    似乎没什么好办法,string的话也得需要先转换成rune再反转再转成string package main import ( "fmt" ) func reverseString ...

  2. mysql服务器iowait高优化一例完整深入解析

    我们有一服务器,上面运行着两个mysql实例,这几天iowait一直很高,在20-30%,下午特地专门排查和解决了下,相关过程整理如下. 该服务器有两个挂载盘,服务器在阿里云上,一个系统盘,一个数据盘 ...

  3. 存根类(stub) 是什么意思？有什么作用？(转)

    存根类是一个类,它实现了一个接口,但是实现后的每个方法都是空的.  它的作用是:如果一个接口有很多方法,如果要实现这个接口,就要实现所有的方法.但是一个类从业务来说,可能只需要其中一两个方法.   如 ...

  4. Codeforces Round #439 (Div. 2) Problem A (Codeforces 869A) - 暴力

    Rock... Paper! After Karen have found the deterministic winning (losing?) strategy for rock-paper-sc ...

  5. WebSocket、Socket

    https://www.cnblogs.com/jingmoxukong/p/7755643.html#undefined WebSocket 详解教程 WebSocket介绍,与Socket的区别 ...

  6. Base64编码为什么会使数据量变大？

    当把byte[]通过Convert.ToBase64String转换成Base64编码字符串时数据量明显变大,为何呢?这里就得先探究一下什么是Base64编码. Base64编码的思想是是采用64个基 ...

  7. topcoder srm 688 div1 -3

    1.给出一个只包含'(',')'的字符串$s$,现在对它进行若干次如下操作使其变成匹配的括号串(每次操作包含3个步骤):(1)选择 $L,R,L\leq R$;(2)将$L,R$之间的字符翻转:(3) ...

  8. Django创建超级用户出现错误

    如果运行python manage.py createsuperuser出现一大堆错误代码 解决方案: 1.检查settings.py中的DATABASE配置确定正确性 2.执行python mana ...

  9. img的基线对齐问题

    http://blog.csdn.net/u011997156/article/details/44806523

  10. Multi-attention Network for One Shot Learning

    Multi-attention Network for One Shot Learning 2018-05-15 22:35:50  本文的贡献点在于: 1. 表明类别标签信息对 one shot l ...