html5 歌词自动滚动效果,简单的HTML5音乐播放器(带歌词滚动)
1 var musicPlayer = function() {2 return this.init.apply(this, arguments);3 };4
5 musicPlayer.prototype ={6 constructor: musicPlayer,7 init: function(options) {8 if (isEmptyObj(options) || typeof options !== ‘object‘) return;9 this.player =options.player;10 this.lrc =options.lrc;11 this.lrcArea =options.lrcArea;12 //用于保存歌词
13 this.lrcArr =[];14 //用于保存时间戳
15 this.timestamp =[];16 //处理歌词
17 this.handleLrc(this.lrc);18 var that = this;19
20 this.player.addEventListener(‘play‘,21 function() {22 that.play();23 },24 false);25
26 this.player.addEventListener(‘pause‘,27 function() {28 that.pause();29 },30 false);31
32 //歌词索引
33 this.idx = 0;34 },35 //格式化歌词
36 handleLrc: function(lrc) {37 var re = /(\[.+\])(.+)?/gm,38 ul = cEl(‘ul‘),39 frag =document.createDocumentFragment(),40 tmpArr,41 i,42 len;43 this.lrcArea.innerHTML = ‘‘;44 frag.appendChild(ul);45 ul.id = ‘c‘;46 this.lrcArea.appendChild(frag);47
48 var txt =lrc.replace(re,49 function(a, b, c) {50 return b + (c === undefined ? ‘ ‘: c) + ‘\n‘;51 });52
53 tmpArr = txt.split(‘\n‘);54
55 //处理歌词
56 for (i = 0, len = tmpArr.length; i < len; i++) {57 var item =trim(tmpArr[i]);58 if (item.length > 0) {59 this.lrcArr.push(item);60 }61 }62
63 frag =document.createDocumentFragment();64
65 for (i = 0, len = this.lrcArr.length; i < len; i++) {66 var li = cEl(‘li‘);67 if (i === 0) {68 li.className = ‘cur‘;69 }70 li.innerHTML = this.lrcArr[i].replace(/\[.+\]/i, ‘‘);71 //处理时间
72 this.timestamp.push(this.lrcArr[i].replace(re,73 function(a, b, c) {74 returnb;75 }).replace(‘[‘, ‘‘).replace(‘]‘, ‘‘));76 frag.appendChild(li);77 }78
79 ul.appendChild(frag);80 this.li = $(‘lrcArea‘).getElementsByTagName(‘li‘);81 },82 //播放
83 play: function() {84 this.stop = false;85 var that = this,86 player = this.player,87 i, len;88
89 this.t = setInterval(function() {90 if (that.stop) return;91 that.curTime =player.currentTime;92
93 for (i = 0, len = that.timestamp.length - 1; i < len; i++) {94 var prevTime =that.formatTimeStamp(that.timestamp[i]),95 nextTime = that.formatTimeStamp(that.timestamp[i + 1]);96 //当前播放时间与前后歌词时间比较,如果位于这两者之间则转到该歌词
97 if (parseFloat(that.curTime) > prevTime && parseFloat(that.curTime)
106 pause: function() {107 this.stop = true;108 clearInterval(this.t);109 },110 //格式化时间
111 formatTimeStamp: function(timestamp) {112 var re = /([0-9]+):([0-9]+)\.([0-9]+)/i,113 seconds =timestamp.replace(re,114 function(a, b, c, d) {115 return Number(b * 60) + Number(c) + parseFloat(‘0.‘ +d);116 });117 returnseconds;118 },119 //歌词滚动
120 scrollToLrc: function(idx) {121 var ds = getOffset(this.li[idx]).top,122 i,123 len;124 //如果歌词索引没有变动,则认为这句没有唱完,不处理
125 if (this.idx === idx) return;126 //否则更新索引值并更新样式和位置
127 this.idx =idx;128 for (i = 0, len = this.li.length; i < len; i++) {129 this.li[i].className = ‘‘;130 }131 this.li[idx].className = ‘cur‘;132 this.lrcArea.scrollTop = ds - this.lrcArea.offsetHeight / 2;133 }134 };135
136 function$(id) {137 return typeof id === ‘string‘ ?document.getElementById(id) : id;138 }139 functioncEl(el) {140 returndocument.createElement(el);141 }142 functiontrim(str) {143 return str.replace(/(^\s*)|(\s*$)/g, "");144 }145 functionisEmptyObj(o) {146 for (var p in o) return false;147 return true;148 }149 functiongetOffset(el) {150 var parent =el.offsetParent,151 left =el.offsetLeft,152 top =el.offsetTop;153
154 while (parent !== null) {155 left +=parent.offsetLeft;156 top +=parent.offsetTop;157 parent =parent.offsetParent;158 }159
160 return{161 left: left,162 top: top163 };164 }165
166 var p = newmusicPlayer({167 player: $(‘player‘),168 lrc: $(‘lrc‘).innerHTML,169 lrcArea: $(‘lrcArea‘)170 });
html5 歌词自动滚动效果,简单的HTML5音乐播放器(带歌词滚动)相关推荐
- C#制作简单的本地音乐播放器(二)—— 显示歌词
此篇文章主要补充 C#制作简单的本地音乐播放器(一) 中的"歌词显示"部分的内容. 页面设计部分 相关内容 本程序使用的歌词文件为lrc格式,lrc是英文lyric(歌词)的缩写, ...
- 一款简单的本地音乐播放器,界面美观、包括主题切换、歌单管理等等
MeetMusic 项目地址:lijunyandev/MeetMusic 简介:一款简单的本地音乐播放器,界面美观.包括主题切换.歌单管理等等 音乐-播放器-主题切换- App 效果图 ...
- [HTML5]简单网页本地音乐播放器
既然HTML5提出与本地交互方便,就想写个HTML5的本地音乐播放器.一开始问题主要集中在怎么读取本地文件路径,我想肯定可以用JS实现去操作本地文件(因为node.js很容易实现读取本地文件,但是原生 ...
- C#/音乐播放器/带进度条/歌词滚动、颜色变化/桌面应用程序设计
用基本C#知识实现制作一个音乐播放器 前言 写这个博客并不是说我的作品多么高级或完美,只是希望能在一些功能方面给你们一些启发,能帮助到你们做出真正好的程序,这就足够了 话不多说,让我们开始吧~~~ 截 ...
- java歌词解析器_Java swing实现音乐播放器桌面歌词字体变色效果|chu
最近看到某音乐播放器的桌面歌词如下图 其中字母"U"有两种颜色,突发奇想想模仿一下实现文字变色. 思路:使用两种颜色分别把字符串绘制到两个BufferedImage中,然后根据两种 ...
- iOS 简单实用的音乐播放器,少年,自己做个歌单吧。。。。。。
我也不知道为什么突然会想写一下音乐播放器的,感觉应该挺好的玩,自己把自己喜欢的歌曲导出来,用程序加载跑起来,那歌听起来必定很带感啊......不过那首Love Story被我听了无数遍......听吐 ...
- 安卓音乐播放器中歌词同步问题
音乐文件是.lrc格式的,lrc格式的文件,是MP3播放器唯一能识别的歌词文件,在MP3播放器中可以去同步 显示歌词.它是一种包含着"[]"形式的"标签"的.基 ...
- 卡拉OK效果的实现-iOS音乐播放器
自己编写的音乐播放器偶然用到这个模块,发现没有思路,而且上网搜了搜,关于这方面的文章不是很多,没找到满意的结果,然后自己也是想了想,最终实现了这种效果,想通了发现其实很简单. 直接上原理: 第一种: ...
- iOS开发手记-仿QQ音乐播放器动态歌词的实现
最近朋友想做个音乐App,让我帮忙参考下.其中歌词动态滚动的效果,正好我之前也没做过,顺便学习一下,先来个预览效果. 实现思路 歌词常见的就是lrc歌词了,我们这里也是通过解析lrc歌词文件来获取其播 ...
- android 歌词同步代码,android手机音乐播放器实现歌词同步
最近在做一款android手机上的音乐播放器,学习到了很多东西,像是Fragment,ActionBar的使用等等,这里就先介绍一下歌词同步的实现问题. 歌词同步的实现思路很简单:获取歌词文件LRC中 ...
最新文章
- 面试题整理10 最小的k个数
- 任务调度之Quartz1
- day3----python变量与常量
- Aspcms框架的webshell
- 北方人思想为什么落后_广西人为什么很少到北方打工?
- 关于RestTemplate的几个问题
- VB讲课笔记14:二级VB知识点总结
- (73)Verilog HDL系统函数和任务:$monitor
- python 顺序表
- Shell学习笔记一
- 百度竞价需抓住消费者心理
- linux7 (RHEL7.5)超详细系统安装步骤
- excel编程系列基础:认识VBA的编辑器VBE
- Jetson TK1 配置
- 转:授之于鱼还是授之以渔,金蝶给了企业SaaS一个完整答案
- 正序,负序,零序分量的产生与计算
- Navicat15安装教程
- 设计LDO电路需考虑因素
- 小学计算机课活动小结,电脑教师工作小结
- caffe cmake matlab,编译caffe时候抛出的错误
热门文章
- android 自定义view参数,Android自定义View:MeasureSpec的真正意义与View大小控制
- 服务监管框架下的 IT 运维服务与绩效管理体系建设
- ghostscript windows mac 下安装和 C++ 程序调用
- 雨木林风 的 Ylmf OS
- matlab 第二版 赵元哲 下载,基于MATLAB的黑盒电路仿真设计及应用
- 如何让自己像打王者荣耀一样疯狂且不知疲倦地学习?
- Python 爬虫--网站下载器
- 深度linux升级,测试从Deepin Linux 15升级到Deepin Linux v20
- java 扫雷 实验报告_java实现简单扫雷
- 已知相关系数求解联合分布律