说明（2017.3.15）：

1. lrc.js里面存储LRC歌词的格式的数组，获取里面的时间轴，转为秒数。

2. 通过audio.currentTime属性，setinterval每秒获取歌曲播放的秒数。

3. 将两个时间比大小，如果“歌曲播放时间”>“歌词时间”，就输出这句歌词。

4. 补充需求：

（1）需要把歌词补充完整

（2）不是在控制台输出，直接在页面输出

（3）增加播放列表

music.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

     <audio src="Taylor Swift - Love Story.mp3" id="audio" autoplay="autoplay" controls="controls" preload="auto">

     您的浏览器不支持audio属性，请更换浏览器再进行浏览。

     </audio>

     <button id="btnTime">time</button>

 </body>

 <script src="lrc.js"></script>

 <script type="text/javascript">

     var text = "[00:15.80]We were both young when I first saw you\

 [00:19.74]I closed my eyes and the flashback starts\

 [00:23.26]I'm standing there";

     var audio = document.getElementById("audio");

     btnTime.onclick = function(){

         var timeLrc = getTime();

         console.log(timeLrc);

     };

     var getTime = function(){

         // 不需要这个函数了，直接输出audio.currentTime这个时间进行比大小就可以

         // 获取03:14:33这种格式的当前播放时间

         var timeNow = audio.currentTime

         // console.log(timeNow);

         // 获取分钟数

         var timeMin = String(Math.floor(timeNow/60));

         // 如果分钟数是1位，前面加个0

         timeMin = timeMin.length<2 ? "0"+timeMin : timeMin;

         // console.log(timeMin);

         var timeSec = String(Math.floor(timeNow%60));

         timeSec = timeSec.length<2 ? "0"+timeSec : timeSec;

         // console.log(timeSec);

         var timeMil = String(timeNow);

         timeMil = timeMil.substr(timeMil.indexOf('.')+1,2)

         // console.log(timeMil);

         var timeLrc = timeMin + ":" + timeSec + "." + timeMil;

         return timeLrc;

     };

     var getLrcTime = function(i){

         // 获取歌词里的每句的时间

         var lrcTime = loveStory[i].substr(1,8);

         // 分钟转数字可以去掉前面的0

         lrcTimeMin = parseInt(lrcTime.split(":")[0]);

         // 虽然末尾有0，不过要转成数字比大小

         lrcTimeSec = parseFloat(lrcTime.split(":")[1]);

         lrcTime = lrcTimeMin*60+lrcTimeSec;

         // console.log(lrcTimeMin);

         // console.log(lrcTimeSec);

         // console.log(lrcTime);

         return lrcTime;

     };

     // getLrcTime();

     setInterval(function(){

         // 获取lrc.js文件中的歌词，每秒刷新一下，获取播放时间，然后跟歌词里的时间比对，如果播放时间大于歌词时间，就显示歌词。

         var timeNow = audio.currentTime

         for(var i = 0; i < loveStory.length; i++){

             var lrcTime = getLrcTime(i);

             // console.log(lrcTime);

             var lrcWord = loveStory[i].substr(10,loveStory[i].length);

             if(timeNow > lrcTime){

                 console.log(lrcTime);

                 console.log(lrcWord);

                 loveStory.splice(i,1);

             }else{

             }

         }

         // if (!audio.paused) {

         //     console.log(playTime.substr(0,5));

         //     // console.log(playTime);

         // }

     },1000);

 </script>

 </html>

lrc.js

 var loveStory = [

     "[00:15.80]We were both young when I first saw you",

     "[00:19.74]I closed my eyes and the flashback starts",

     "[00:23.26]I'm standing there",

     "[00:26.95]On a balcony in summer air",

     "[00:32.14]See the lights see the party the ball gowns",

     "[00:35.87]I see you make your way through the crowd",

     "[00:39.29]And say hello",

     "[00:43.38]Little did I know",

     "[00:48.07]That you were Romeo you were throwing pebbles",

     "[00:51.72]And my daddy said stay away from Juliet",

     "[00:55.38]And I was crying on the staircase",

     "[00:58.28]Begging you please don't go",

     "[01:02.74]And I said",

     "[01:04.25]Romeo take me somewhere we can be alone",

     "[01:08.38]I'll be waiting all there's left to do is run"

 ];

JS学习笔记（6）--音乐播放器的更多相关文章

  1. 使用 原生js 制作插件 (javaScript音乐播放器)

    1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  2. 自定义css样式结合js控制audio做音乐播放器

    最近工作需求需要播放预览一些音乐资源,所以自己写了个控制audio的音乐播放器. 实现的原理主要是通过js调整audio的对象属性及对象方法来进行控制: 1.通过play().pause()来控制音乐 ...

  3. Vuejs---《Vue.js + Node.js-构建音乐播放器新玩法-video》

    官方文档:http://vuejs.org/v2/guide/syntax.html 中文文档: https://cn.vuejs.org/v2/guide/syntax.html https://g ...

  4. 原生JS实现音乐播放器！

      前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的 ...

  5. JS实现音乐播放器

    JS实现音乐播放器  前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播 ...

  6. Android（java）学习笔记234： 服务（service）之音乐播放器

    1.我们播放音乐,希望在后台长期运行,不希望因为内存不足等等原因,从而导致被gc回收,音乐播放终止,所以我们这里使用服务Service创建一个音乐播放器. 2.创建一个音乐播放器项目(使用服务) (1 ...

  7. [ 原创 ]学习笔记-做一个Android音乐播放器是遇到的一些困难

    最近再做一个安卓的音乐播放器,是实验室里学长派的任务,我是在eclipse上进行开发的,由于没有android的基础,所以做起来困难重重. 首先是布局上的困难 1.layout里的控件属性不熟悉 2. ...

  8. Android学习笔记_24_多媒体MediaPlayer对象之音乐播放器与SoundPool声音池

    一.MediaPlayer对象常用方法介绍: MediaPlayer mediaPlayer = new MediaPlayer(); if (mediaPlayer.isPlaying()) { m ...

  9. Android（java）学习笔记177： 服务（service）之音乐播放器

    1.我们播放音乐,希望在后台长期运行,不希望因为内存不足等等原因,从而导致被gc回收,音乐播放终止,所以我们这里使用服务Service创建一个音乐播放器. 2.创建一个音乐播放器项目(使用服务) (1 ...

  10. 吴裕雄--天生自然python学习笔记：python 用pygame模块制作 MP3 音乐播放器

    利用 music 对象来制作一个 MP3 音乐播放器 . 应用程序总览 从歌曲清单中选择指定的歌曲,单击“播放”按钮可开始播放, 在播放 xxx 歌曲”的信息. 歌曲播放的过程中,可以暂停.停止,也可 ...

随机推荐

  1. pip简单配置

    pip安装Python模块的工具,等价于Redhat中的yum! 01.下载 百度云盘:http://pan.baidu.com/s/1eRHGBfk             ###相关的 Linux ...

  2. MySQL5.7.18基于GTID的主从复制过程实现

    GTID是5.6时加入的,在5.7中被进一步完善,生产环境建议在5.7版本中使用.GTID全称为Global Transaction Identifiers,全局事务标识符.GTID的复制完全是基于事 ...

  3. ios block常见的错误（三）——并发编程的block引用

    在一些技术型的企业里面,有关block面试笔试题,将会问得很深,如下例子: 请问DemoObj的对象能否正确释放,为什么? //DemoObj.m @interface DemoObj() @prop ...

  4. [转]网易云音乐Android版使用的开源组件

    原文链接 网易云音乐Android版从第一版使用到现在,全新的 Material Design 界面,更加清新.简洁.同样也是音乐播放器开发者,我们确实需要思考,相同的功能,会如何选择.感谢开源,让我 ...

  5. SecureCRT 快捷键总结 设置快捷键

    http://oldboy.blog.51cto.com/2561410/907098 自己整理的一些 查看 Alt + Enter     全屏   菜单 Alt + f + n     克隆会话窗 ...

  6. 图标、图片、logo地址

    阿里通信图标库 http://www.iconfont.cn/collections/show/29

  7. Android开发之探秘蓝牙隐藏API

    这次讲得深入些,探讨下蓝牙方面的隐藏API.用过Android系统设置(Setting)的人都知道蓝牙搜索之后可以建立配对和解除配对,但是这两项功能的函数没有在SDK中给出,那么如何去使用这两项功能呢 ...

  8. JMeter ----请求数据参数设置-自动增长变量

    使用Jmeter性能测试的时候, 需要录入一些测试数据, 当这些数据要插入数据库的时候, 数据库通常会要求数据不能重复, 所以无法使用同一个数据反复进行测试, 这时候就需要在每次请求的时候使用不同的请 ...

  9. Linux标识进程

    一.前言 其实两年前,本站已经有了一篇关于进程标识的文档,不过非常的简陋,而且代码是来自2.6内核.随着linux container.pid namespace等概念的引入,进程标识方面已经有了天翻 ...

  10. Python len() 方法

    描述 Python len() 方法返回对象(字符串.列表.元组.字典等)长度或项目个数. 语法 len() 方法语法: len(obj) 参数 obj -- 对象(字符串.列表.元组.字典等). 返 ...