前言

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

1.不要上一曲下一曲

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

3.有时间显示

demo实现功能

1.进度条滚动

2.时间显示

3.播放控制

4.多平台播放

关键代码展示

<body>

    <div class="top"></div>

    <div id="containner">

        <div style="width: 78px; height: 30px; border-radius: 11px; text-align: center; margin:0px auto; ">

            <div><img id="icon" src="played.jpg" onclick="play()" width="" height="" /></div>

         </div>

        <div style="width:100%; height:22px; padding-right:50px;"><span id="showtime" >:</span><span>/</span><span id="currenttime">:</span></div>

        <div id="barbox" class="graph" style="width:98%">

            <strong id="bar" class="bar" style="width: 0%;"></strong>

        </div>

        <div id="divplayer">

            <audio id="player" src="" loop="" autostart="true" hidden="true"></audio>

        </div>

    </div>

</body>

</html>

<script language="javascript">

    //成员变量

    var url = 'mp3/myeye.mp3';//（设定文件路径）

    var pausedimg = "paused.png";

    var playedimg = "played.jpg";

    var div = document.getElementById('divplayer');

    var player = document.getElementsByTagName('audio')[];

    player.src = url;

    //文件长度(秒)

    var fileseconds = ;

    //定时器对象

    var progressStateTimer;

    //进度条父容器宽度

    var barboxwidth = ;

    //进度条当前宽度

    var currentbarwidth = ;

    //每秒追加宽度

    var appendwidth = ;

    //进度条对象

    var bar;

    //当前运行秒数

    var currentseconds = ;

    function play() {

        if (player && player.paused) {

            //获取文件时长

            fileseconds = parseInt(player.duration);

            //显示文件时长

            document.getElementById("showtime").innerHTML = (formatTime(fileseconds));

            //获取进度条的容器宽度

            barboxwidth = document.getElementById("barbox").style.width;

            //获取容器变量备用

            bar = document.getElementById("bar");

            //开始播放

            player.play();

            //显示暂停按钮

            document.getElementById("icon").src = pausedimg;

            //执行进度条方法

            progressStateTimer = setInterval(prossbar, );

        } else if (player && player.played) {

            //暂停并停止进度条

            player.pause();

            //显示播放按钮

            document.getElementById("icon").src = playedimg;

            //停止进度条

            clearInterval(progressStateTimer);

        }

        else {

            //进到此处说明player未实例化 或者状态不是播放和暂停

            //dosomething

        }

    }

    var prossbar = function () {

        if (fileseconds > ) {

            //重新计算新的宽度

            if (currentseconds == ) {

                appendwidth = ;

            } else

            {

                appendwidth = (currentseconds / fileseconds) * ;

            }

            bar.style.width = appendwidth + "%";

            //显示当前播放的时间

            document.getElementById("currenttime").innerHTML = formatTime(currentseconds);

            currentseconds++;

            if (currentseconds > fileseconds || currentbarwidth >= barboxwidth) {

                //停止播放并清除进度条计时器

                player.pause();

                clearInterval(progressStateTimer);

            }

        }

    }

    function formatTime(second) {

        return [parseInt(second /  % ), parseInt(second % )].join(":")

        .replace(/\b(\d)\b/g, "0$1");

    }

</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. 转发 XHTML 和 DOCTYPE 切换(MSDN)

    使用 Web 标准生成 ASP.NET 2.0 Web 站点 XHTML 和 DOCTYPE 切换 为 Web页指定 DOCTYPE 会影响浏览器呈现页的方式.Internet Explorer.Mo ...

  2. Msbuild项目集成右键菜单编译

    DS1.背景:   我们为什么要将VS2008命令行编译.sln文件集成到右键菜单呢? 原因一:VS2008很好很强大,但太费系统资源了,尤其是在虚拟机在里面装VS2008的时候更是如此. 原因二:有 ...

  3. 深入理解git，从研究git目录开始

    转发学习的啦. 似乎很少有人在读某个git快速教程的时候会说:“这个关于git的快速教程太酷了!读完了用起git来超级舒服,并且我一点也不怕自己会破坏什么东西.” 对git的初学者来说,刚接触git时 ...

  4. BaseHttpListActivity，几行代码搞定Android Http列表请求、加载和缓存

    Android开发中,向服务器请求一个列表并显示是非常常见的需求,但实现起来比较麻烦,代码繁杂. 随着应用的更新迭代,这种需求越来越多,我渐渐发现了实现这种需求的代码的共同点. 于是我将Activit ...

  5. sh back mongo

    !/bin/shBACK_DB=ALLOUT_DIR=/home/jianyeruan/app/mongo #临时备份目录TAR_DIR=/home/jianyeruan/app/mongotar # ...

  6. [开发笔记]-未找到与约束ContractName Microsoft.VisualStudio.Text.ITextDocumentFactoryService...匹配的导出【转载自：酷小孩】

    原文地址:http://www.cnblogs.com/babycool/p/3199158.html 今天打算用VisualStudio2012做一个js效果页面测试的时候,打开VS2012新建项目 ...

  7. 关于Thinkphp Upload类

    $this->uploads($picurl); public function uploads($picurl) { $config = array( 'maxSize' => 3145 ...

  8. Xcode快捷键

    1. 文件 CMD + N: 新文件 CMD + SHIFT + N: 新项目 CMD + O: 打开 CMD + S: 保存 CMD + SHIFT + S: 另存为 CMD + W: 关闭窗口 C ...

  9. uva 489 Hangman Judge

    大意:电脑想个单词,玩家来猜.玩家输入一个个字母,若答案里有这个字母,则显示该单词中所有该字母.最终目标是显示答案所有字母.猜错7次,死: 注意特殊条件:1.玩家不断重复错误的字母,只算一次猜错.2. ...

  10. iOS中真机连接电脑运行程序出现问题