各种音乐播放器上都有一个自动滚动播放歌词的功能，那么这个功能用JavaScript怎么实现呢？请看下文。
一般音乐播放器使用的歌词格式都是lrc，为了方便处理，我们这里使用XML格式的歌词。介绍一个网站：中文歌词库。它提供xml格式的歌词。
我们先来看一下这个例子的最终效果：
下面是基于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="js/jquery-2.1.4.min.js"></script> </head> <body> <div id="#audio-wrapper"> <p><audio src="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.xml\', type:\'get\', dataType:\'xml\', success:function(data){ html += \'<div class="info">\'; if($(data).find(\'TITLE\').length > 0){ html += \'<p class="music-title">歌曲：\' + $(data).find(\'TITLE\').text()+\'</p>\'; } if($(data).find(\'ALBUM\').length > 0){ html += \'<p class="album">专辑：\' + $(data).find(\'ALBUM\').text()+\'</p>\'; } if($(data).find(\'ARTIST\').length > 0){ html += \'<p class="artist">演唱：\' + $(data).find(\'ARTIST\').text()+\'</p>\'; } html += \'</div>\'; html += \'<div class="lyrics-container">\' html += \'<div class="lyrics-container2">\' $(data).find(\'LRC\').each(function(){ html += \'<p class="lyrics" 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>