欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

基于JavaScript怎么实现让歌词滚动播放_javascript技巧

程序员文章站 2022-04-14 10:25:52
...
各种音乐播放器上都有一个自动滚动播放歌词的功能,当前滚动到的歌词会高亮居中显示,即使歌词被换行也能正常居中,那么这个功能基于JavaScript怎么实现让歌词滚动播放呢?请看下文详解。

一般音乐播放器使用的歌词格式都是lrc,为了方便处理,我们这里使用XML格式的歌词。介绍一个网站:中文歌词库。它提供xml格式的歌词。

我们先来看一下这个例子的最终效果:

基于JavaScript怎么实现让歌词滚动播放_javascript技巧

下面是基于jQuery的具体代码:



Player

'; html += '
' html += '
' $(data).find('LRC').each(function(){ html += '

' + $(this).text() +'

'; }); html += '
'; $lrc.html(html); //alert($(data).find('LRC').length); } }); } var timer = setInterval(function(){ var now = new Date(); var elapsed = now - start; if($lrc.find('.lyrics').length){ $lrc.find('.lyrics').each(function(){ var isOK = elapsed - $(this).attr('tag'); if(isOK 0){ $lrc.find('.lyrics').removeClass('activated'); $(this).addClass('activated'); if($(this).prevAll('.lyrics').length > 3){ $('.lyrics-container2').animate({ 'top':'-=30px' }); //console.log($(this).prevAll('.lyrics').length); } } }); } },10); }); });