JS学习笔记(6)--音乐播放器
说明(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)--音乐播放器的更多相关文章
- 使用 原生js 制作插件 (javaScript音乐播放器)
1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 自定义css样式结合js控制audio做音乐播放器
最近工作需求需要播放预览一些音乐资源,所以自己写了个控制audio的音乐播放器. 实现的原理主要是通过js调整audio的对象属性及对象方法来进行控制: 1.通过play().pause()来控制音乐 ...
- Vuejs---《Vue.js + Node.js-构建音乐播放器新玩法-video》
官方文档:http://vuejs.org/v2/guide/syntax.html 中文文档: https://cn.vuejs.org/v2/guide/syntax.html https://g ...
- 原生JS实现音乐播放器!
前 言 最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的 ...
- JS实现音乐播放器
JS实现音乐播放器 前 言 最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播 ...
- Android(java)学习笔记234: 服务(service)之音乐播放器
1.我们播放音乐,希望在后台长期运行,不希望因为内存不足等等原因,从而导致被gc回收,音乐播放终止,所以我们这里使用服务Service创建一个音乐播放器. 2.创建一个音乐播放器项目(使用服务) (1 ...
- [ 原创 ]学习笔记-做一个Android音乐播放器是遇到的一些困难
最近再做一个安卓的音乐播放器,是实验室里学长派的任务,我是在eclipse上进行开发的,由于没有android的基础,所以做起来困难重重. 首先是布局上的困难 1.layout里的控件属性不熟悉 2. ...
- Android学习笔记_24_多媒体MediaPlayer对象之音乐播放器与SoundPool声音池
一.MediaPlayer对象常用方法介绍: MediaPlayer mediaPlayer = new MediaPlayer(); if (mediaPlayer.isPlaying()) { m ...
- Android(java)学习笔记177: 服务(service)之音乐播放器
1.我们播放音乐,希望在后台长期运行,不希望因为内存不足等等原因,从而导致被gc回收,音乐播放终止,所以我们这里使用服务Service创建一个音乐播放器. 2.创建一个音乐播放器项目(使用服务) (1 ...
- 吴裕雄--天生自然python学习笔记:python 用pygame模块制作 MP3 音乐播放器
利用 music 对象来制作一个 MP3 音乐播放器 . 应用程序总览 从歌曲清单中选择指定的歌曲,单击“播放”按钮可开始播放, 在播放 xxx 歌曲”的信息. 歌曲播放的过程中,可以暂停.停止,也可 ...
随机推荐
- python之函数用法staticmethod
# -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法staticmethod #http://www.cnblogs.com/hongfe ...
- MassiGra045 简体中文化|打开图片很快
MassiGra045 简体中文化,是一款对图片的打开预览很高效的工具,据传是日本开发的. 本人之前一直使用,唯一有点缺点就是不能旋转图片. 图片预览 峰回路转: http://pan.baidu.c ...
- HDUOJ---2546 饭卡
饭卡 Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...
- SVN 使用学习记录
一.基本SVN操作 安装了SVN之后,在本机上点击右键,就能够看到如下信息: 1.建立SVN Repository 下面来建立一个SVN Repository.这个文件夹是同步用的,你可以放在本机的任 ...
- Openresty增加waf配置
Openresty增加waf配置 1. Ngx lua waf 说明 防止sql注入,本地包含,部分溢出,fuzzing测试,xss,SSRF等web攻击 防止svn/备份之类文件泄漏 防止Apach ...
- 以太网帧格式、IP数据报格式、TCP段格式+UDP段格式 详解
转载:http://www.cnblogs.com/lifan3a/articles/6649970.html 以太网帧格式.IP数据报格式.TCP段格式+UDP段格式 详解 1.ISO开放系统有 ...
- 服务商域名DNS大全
服务商域名DNS: 服务商 DNS服务器 常用DNS: 英文域名DNS 主DNS名称:ns11.xincache.com 辅DNS名称:ns12.xincache.com 说明:新网共有5组DN ...
- JavaScript - 返回头部
制作浮动top $(window).scroll( function() { var scrollValue=$(window).scrollTop(); scrollValue > 600 ? ...
- C# ASE加密解密
项目中比较常用的加密手段 /// <summary> /// ASE_128_ECB_无填充_64Base_加密函数 /// </summary> /// <param ...
- Latex--TikZ和PGF--高级文本绘图,思维绘图,想到--得到!
Latex--TikZ和PGF--高级文本绘图,思维绘图,想到--得到! TikZ和PGF是一种用在TeX上的CLI绘图工具.CLI和GUI是两种常见的绘图方式,前者是所想即所得(WYTIWYG)的, ...