如上图所示：为效果图

　　代码如下：

　　

<!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. Mybatis打印不出SQL日志

    要是mybatis项目打印出日志,只需要在log4j的配置文件中加上下面一段即可 log4j.logger.com.ibatis=debug log4j.logger.com.ibatis.commo ...

  2. pycharm 安装激活操作

    pycharm 安装激活操作 什么是 PyCharm PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试.语法高亮.Project管 ...

  3. 火车时刻表WebApp

    关键词 :Ajax 跨域访问 php 同源策略 JQueryMobile 前言 在面试的过程中,兄弟连的徐老师提出要求我用JQuery Mobile(前端框架)来实现一个具有“火车时刻表”功能的Web ...

  4. Linux-eval

    shell中eval的用法示例: 语 法:eval [参数] 功能说明:eval会对后面的[参数]进行两遍扫描,如果在第一遍扫面后cmdLine是一个普通命令,则执行此命令:如果cmdLine中含有变 ...

  5. php 带省略号的分页

    原文链接:https://blog.csdn.net/u011060253/article/details/25308455 $curpage = isset($_GET[; $page = new ...

  6. Codeforces Round #427 (Div. 2) Problem D Palindromic characteristics (Codeforces 835D) - 记忆化搜索

    Palindromic characteristics of string s with length |s| is a sequence of |s| integers, where k-th nu ...

  7. Junit的异常测试

    方式1: @Test(expected = IndexOutOfBoundsException.class) public void empty() { new ArrayList<Object ...

  8. Python3基础 list del 从内存中删除整个列表

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  9. salt stack 远程命令

    salt stack 远程命令 salt stack是一种自动化的运维工具,可以同时对N台服务器进行配置管理.远程命令执行等操作. salt stack分为两个部分 salt-master,部署在控制 ...

  10. office完全卸载

    第一步:先暂停office服务,再通过 控制面板--卸载程序  --卸载office应用 第二步:通过office_move(自己命名的工具)软件卸载  工具分享:https://pan.baidu. ...