java歌词高亮显示滚动_js如何处理音乐播放器的歌词文件达到高亮以及滚动的效果？...

原理

把每句歌词都输出为一个li元素，添加data-timeline为该歌词的时间

监听 audio的timeupdate时间，遍历第1步添加的歌词，检测data-timeline为当前audio播放时间的元素

如果相等，则获取该元素的clientHeight并且添加now(高亮className)

获取下一句歌词的时间，如果大于0，证明有下一句歌词，得到下一句歌词和当前句歌词的时间差

使用setTimeout刚才的时间差把当前句歌词的now去掉

歌词容器marginTop滚动

audio.addEventListener('timeupdate', function(e) {

var time = parseInt(e.target.currentTime);

var lines = document.querySelectorAll('[data-timeline]');

var top = 0;

var _thisHeight = 0;

var nextLine = {

i: 0,

time: 0

};

for (var i in lines) {

var line = lines[i];

if (line.dataset != undefined) {

var timeline = parseInt(line.dataset.timeline);

if (timeline == time) {

_thisHeight = line.clientHeight;

line.className = "now";

//获取下一句歌词

nextLine.i = parseInt(i) + 1;

try {

nextLine.time = lines[nextLine.i].dataset.timeline;

}

catch (e) {

}

if (nextLine.time > 0) {

var interval = nextLine.time - timeline;

(function(k) {

setTimeout(function() {

lines[k].className = "";

}, interval * 1000);

})(i);

}

document.querySelector('.lrc>.content').style.marginTop = -(top - _thisHeight) + 'px';

}

else if (timeline < time) {

top += line.clientHeight;

}

java歌词高亮显示滚动_js如何处理音乐播放器的歌词文件达到高亮以及滚动的效果？...相关推荐

android 歌词同步代码,android手机音乐播放器实现歌词同步
最近在做一款android手机上的音乐播放器,学习到了很多东西,像是Fragment,ActionBar的使用等等,这里就先介绍一下歌词同步的实现问题. 歌词同步的实现思路很简单:获取歌词文件LRC中 ...
JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库本源码技术栈: 项目 ...
java歌词解析器_Java swing实现音乐播放器桌面歌词字体变色效果|chu
最近看到某音乐播放器的桌面歌词如下图其中字母"U"有两种颜色,突发奇想想模仿一下实现文字变色. 思路:使用两种颜色分别把字符串绘制到两个BufferedImage中,然后根据两种 ...
java电脑桌面网易云界面,Javafx音乐播放器
Javafx音乐播放器介绍这是款由纯java语言开发的在线音乐播放器,当然也支持播放本地的音乐,在本地音乐模块主要采用目前java最主流的音频标记库Jaudiotagger,可解析MP3文件头信息 ...
iOS开发手记－仿QQ音乐播放器动态歌词的实现
最近朋友想做个音乐App,让我帮忙参考下.其中歌词动态滚动的效果,正好我之前也没做过,顺便学习一下,先来个预览效果. 实现思路歌词常见的就是lrc歌词了,我们这里也是通过解析lrc歌词文件来获取其播 ...
安卓音乐播放器中歌词同步问题
音乐文件是.lrc格式的,lrc格式的文件,是MP3播放器唯一能识别的歌词文件,在MP3播放器中可以去同步显示歌词.它是一种包含着"[]"形式的"标签"的.基 ...
android MusicPlayer 音乐播放器 Lrc歌词控件的实现
MusicPlayer Lrc歌词控件的实现最近在做一个音乐播放器,关于其中歌词控件,上网查过了一些资料,然后进行修改,也算完整的实现了其功能.先看看实现后的效果. 实现的原理实际上是自定义一个Vi ...
iOS高仿微信悬浮窗、忍者小猪游戏、音乐播放器、支付宝、今日头条布局滚动效果等源码...
iOS精选源码 iOS WKWebView的使用源码模仿apple music 小播放器的交互实现高仿微信的悬浮小窗口 iOS仿支付宝首页效果 [swift]仿微信悬浮窗类似于今日头条,网易新闻 ...
音乐播放器(3)--歌词显示
上两篇文章讲述了歌词的在线获取,数据的存储,这一片我们讲解一下歌词的显示我们现在是要在控制台下显示歌词,同时需要按照特定时间的时间显示出特定的歌词,标准的歌词形式如下: [ti:红玫瑰] [ar:陈 ...

java歌词高亮显示滚动_js如何处理音乐播放器的歌词文件达到高亮以及滚动的效果？...

java歌词高亮显示滚动_js如何处理音乐播放器的歌词文件达到高亮以及滚动的效果？...相关推荐

最新文章

热门文章