前言

由于html5自带的播放器样式不怎么好看，大多数人都是自己写一个来满足业务需求。这一次的需求如下：

1.不要上一曲下一曲

2.有进度条和播放暂停按钮

3.有时间显示

demo实现功能

1.进度条滚动

2.时间显示

3.播放控制

4.多平台播放

关键代码展示

  1. <body>
  2.     <div class="top"></div>
  3.     <div id="containner">
  4.  
  5.         <div style="width: 78px; height: 30px; border-radius: 11px; text-align: center; margin:0px auto; ">
  6.             <div><img id="icon" src="played.jpg" onclick="play()" width="" height="" /></div>
  7.  
  8.          </div>
  9.         <div style="width:100%; height:22px; padding-right:50px;"><span id="showtime" >:</span><span>/</span><span id="currenttime">:</span></div>
  10.  
  11.         <div id="barbox" class="graph" style="width:98%">
  12.             <strong id="bar" class="bar" style="width: 0%;"></strong>
  13.         </div>
  14.  
  15.         <div id="divplayer">
  16.             <audio id="player" src="" loop="" autostart="true" hidden="true"></audio>
  17.         </div>
  18.  
  19.     </div>
  20.  
  21. </body>
  22. </html>
  23. <script language="javascript">
  24.     //成员变量
  25.     var url = 'mp3/myeye.mp3';//（设定文件路径）
  26.     var pausedimg = "paused.png";
  27.     var playedimg = "played.jpg";
  28.     var div = document.getElementById('divplayer');
  29.     var player = document.getElementsByTagName('audio')[];
  30.     player.src = url;
  31.     //文件长度(秒)
  32.     var fileseconds = ;
  33.     //定时器对象
  34.     var progressStateTimer;
  35.     //进度条父容器宽度
  36.     var barboxwidth = ;
  37.     //进度条当前宽度
  38.     var currentbarwidth = ;
  39.     //每秒追加宽度
  40.     var appendwidth = ;
  41.     //进度条对象
  42.     var bar;
  43.     //当前运行秒数
  44.     var currentseconds = ;
  45.  
  46.     function play() {
  47.         if (player && player.paused) {
  48.  
  49.             //获取文件时长
  50.             fileseconds = parseInt(player.duration);
  51.             //显示文件时长
  52.             document.getElementById("showtime").innerHTML = (formatTime(fileseconds));
  53.             //获取进度条的容器宽度
  54.             barboxwidth = document.getElementById("barbox").style.width;
  55.  
  56.             //获取容器变量备用
  57.             bar = document.getElementById("bar");
  58.             //开始播放
  59.             player.play();
  60.             //显示暂停按钮
  61.             document.getElementById("icon").src = pausedimg;
  62.             //执行进度条方法
  63.             progressStateTimer = setInterval(prossbar, );
  64.         } else if (player && player.played) {
  65.             //暂停并停止进度条
  66.             player.pause();
  67.             //显示播放按钮
  68.             document.getElementById("icon").src = playedimg;
  69.             //停止进度条
  70.             clearInterval(progressStateTimer);
  71.         }
  72.         else {
  73.             //进到此处说明player未实例化 或者状态不是播放和暂停
  74.             //dosomething
  75.         }
  76.     }
  77.  
  78.     var prossbar = function () {
  79.  
  80.         if (fileseconds > ) {
  81.             //重新计算新的宽度
  82.  
  83.             if (currentseconds == ) {
  84.                 appendwidth = ;
  85.             } else
  86.             {
  87.                 appendwidth = (currentseconds / fileseconds) * ;
  88.             }
  89.  
  90.             bar.style.width = appendwidth + "%";
  91.             //显示当前播放的时间
  92.             document.getElementById("currenttime").innerHTML = formatTime(currentseconds);
  93.             currentseconds++;
  94.             if (currentseconds > fileseconds || currentbarwidth >= barboxwidth) {
  95.                 //停止播放并清除进度条计时器
  96.                 player.pause();
  97.                 clearInterval(progressStateTimer);
  98.             }
  99.         }
  100.     }
  101.  
  102.     function formatTime(second) {
  103.         return [parseInt(second /  % ), parseInt(second % )].join(":")
  104.         .replace(/\b(\d)\b/g, "0$1");
  105.     }
  106. </script>

效果图预览

PC端运行

移动端运行

进度条实现原理

1.利用一个DIV作为容器,一个子DIV作为进度条，初始时设定子DIV宽度为0%

2.获取音频文件总时长（有属性可以直接获取（单位为秒））

3.（核心）利用timer计时器来计算当前播放了多少秒，一秒运行一次（可自由设置）

4.利用播放的秒数/文件总秒数/100  =当前的进度条的百分比

5.直接给进度条设定当前宽度

6.判断播放时长和文件时长一致就停止计时器

进度条的广泛运用

多div组成的进度条之前也曾经用该进度条来实现大文件上传，可以多任务执行

demo下载

点我下载

如果我的分享能帮到你，麻烦给点个赞吧！如果发现错误，也请及时拍砖！请关注我的个人主页http://www.cnblogs.com/jingch

用H5和js写一个移动端自定义播放器的更多相关文章

  1. JS写一个漂亮的音乐播放器

    先放上效果图: 正如图中所展示的播放器那样,我们用HTML+CSS+JS将这个效果实现出来. HTML页面布局 <div class="music"> <div ...

  2. 如何用vue打造一个移动端音乐播放器

    写在前面 没错,这就是慕课网上的那个vue音乐播放器,后台是某音乐播放器的线上接口扒取,虽然这类项目写的人很多,但不得不说这还是个少有的适合vue提升的好项目,做这个项目除了想写一个比较大并且功能复杂 ...

  3. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  4. JS写一个简单日历

    JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  5. 前端与编译原理——用JS写一个JS解释器

    说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念.作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于"抽象语法树(AST)".但这仅仅是个开头而已.编 ...

  6. 如何使用 js 写一个正常人看不懂的无聊代码

    如何使用 js 写一个正常人看不懂的无聊代码 代码质量, 代码可读性, 代码可维护性, clean code WAT js WTF https://www.destroyallsoftware.com ...

  7. 用原生js写一个"多动症"的简历

    用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...

  8. 单片机裸机下写一个自己的shell调试器（转）

    源: 单片机裸机下写一个自己的shell调试器

  9. Hide-Music-Player 一个完整的音乐播放器《IT蓝豹》

    Hide-Music-Player 一个完整的音乐播放器 Hide-Music-Player 一个完整的音乐播放器,本例子主要包括几个点 (1)摇一摇进入播放器 (2)下拉展开新视图(扫描音乐) (3 ...

随机推荐

  1. html/css小练习3

    效果图:

  2. UITableViewCell 顶格

    首先在ViewDidLoad 或者ViewWillAppear里边写 if ([_tabView respondsToSelector:@selector(setSeparatorInset:)]) ...

  3. mysql分表技术（学习心得）

    (最近在学习mysql优化的一些问题,以下为个人一些收获,如有不足,敬请提出!) 概述:当一个表的数据很大,比如200G,这时太大,我们只靠索引也不好使了,这时我们需要分表和分区处理.分表有两种形式( ...

  4. 基于KEIL4开发ARM9（S3C2440）的裸机程序

    本文主要介绍如何使用Keil4开发ARM9(S3C2440)裸机程序. 说明: 一.平台: 操作系统:Windows XP系统 KEIL版本:4.73 开发板:ARM9(S3C2440) 二.建立工程 ...

  5. HDFS副本存放策略

    在client向DataNode写入block之前,会与NameNode有一次通信,由NameNode来选择指定数目的DataNode来存放副本.具体的副本选择策略在BlockPlacementPol ...

  6. 数组操作splice

    今天,实现某个功能时需要操作数组, var  array=[1,2,3,3,4]; console.log(array);           //结果: 1,2,3,3,4 var data=arr ...

  7. 初学者的python学习笔记1——作业篇

    既然是学习,作业必不可少,其实在看后面讲思路之前还是感觉自己写的不错,但是和后面一对比,感觉实在是想的太片面太肤浅了,还需要太多太多改进的地方. 首先放一下作业要求. 最开始做的时候真的是完全按照字面 ...

  8. 作业七：团队项目——Alpha版本冲刺阶段009

    今日安排:组内成员讨论 今日进度:组内成员讨论分工细节以及可能遇到的问题,并提出解决方案

  9. php 文件操作

    $fn="e:\debug.txt"; if(is_writable($fn)==false){ die("不能写入"); } file_put_content ...

  10. SharePoint Framework 概述

    博客地址:http://blog.csdn.net/FoxDave 本文翻译自新出的SharePoint Framework概述介绍文章,原文地址:http://dev.office.com/sh ...