各种音乐播放器上都有一个自动滚动播放歌词的功能，那么这个功能用JavaScript怎么实现呢？请看下文。
一般音乐播放器使用的歌词格式都是lrc，为了方便处理，我们这里使用中文歌词库。它提供
我们先来看一下这个例子的最终效果：
下面是基于jQuery的具体代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Player</title> <style type="text/css"> #audio-wrapper{ border:1px solid; text-align:center; } .activated{ color:#33b; font-weight:bold; background:#ddf; } #lrc{ text-align:center; width:360px; height:400px; overflow:hidden; border:2px solid #ddd; box-shadow:2px 2px 2px silver; } .lyrics-container{ position:relative; width:99%; height:80%; border:1px solid red; overflow:hidden; } .lyrics-container2{ position:absolute; width:355px; } #lrc p{ text-indent:0; margin:0; padding:6px; } .music-title,.album,.artist{ margin:0; padding:4px; text-indent:0; text-align:left; } </style> <script type="text/javascript" src='/images/loading.gif' data-original="js/jquery-2.1.4.min.js"></script></head><body> <div id="#audio-wrapper"> <p><audio src='/images/loading.gif' data-original="data/aimei.mp3" controls></audio></p> </div> <div id="lrc"></div> <script type="text/javascript"> $(document).ready(function(){ var $lrc = $('#lrc'); var html =''; $('audio').on('play',function(){ var start = new Date(); if($lrc.html() == ''){ $.ajax({ url:'data/aimei.', type:'get', dataType:'', success:function(data){ html += '<div >'; if($(data).find('TITLE').length > 0){ html += '<p >歌曲：' + $(data).find('TITLE').text()+'</p>'; } if($(data).find('ALBUM').length > 0){ html += '<p >专辑：' + $(data).find('ALBUM').text()+'</p>'; } if($(data).find('ARTIST').length > 0){ html += '<p >演唱：' + $(data).find('ARTIST').text()+'</p>'; } html += '</div>'; html += '<div >' html += '<div >' $(data).find('LRC').each(function(){ html += '<p tag="'+ $(this).attr('TAG') +'">' + $(this).text() +'</p>'; }); html += '</div></div>'; $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 < 13 && 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); }); }); </script></body></html>原标题：用JavaScript实现歌词滚动播放
关键词：JavaScript
我知道了 