各种音乐播放器上都有一个自动滚动播放歌词的功能，当前滚动到的歌词会高亮居中显示，即使歌词被换行也能正常居中，那么这个功能基于Java脚本语言怎么实现让歌词滚动播放呢？请看下文详解。

一般音乐播放器使用的歌词格式都是lrc，为了方便处理，我们这里使用可扩展置标语言格式的歌词。介绍一个网站：中文歌词库。它提供可扩展标记语言格式的歌词。

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

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

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title player/title style type=' text/CSS ' # audio-wrapper { border :1 px solid；文本对齐：居中；} .已激活{ color : # 33 bfont-weight : bold；背景# ddf } # LRC { text-align : center；宽度宽度：360像素高度：400 px飞越：隐藏；border:2px实心# dddbox-shadow:2px 2px 2px银；} .歌词-容器{位置：相对宽度：99%;高度：80%;border:1px纯红；飞越：隐藏；} .歌词容器{ position:absolute绝对值宽度width :355 px } # LRC p { text-缩进：0；margin :0 padd :6 px }。音乐标题。专辑，艺术家{ margin :0 padd :4 px文本-缩进：0；向左文本对齐：}/style脚本类型=' text/JavaScript ' src=' http : js/jquery-2。1 .4 .量滴js '/script/head dy div id=' # audio-wrapper ' paudio src=' http : data/aimei。MP3 '控件/音频/p/div id=' LRC '/div脚本类型='文本/JavaScript ' $(文档)。ready(function(){ var $ LRC=$(' # LRC ')；var html=$("音频")。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($(数据)。查找(' TITLE ').长度0){ html='p class='music-title '歌曲：' $(数据)。查找(' TITLE ').text()'/p '；} if($(数据)。查找(“ALBUM”).长度0){ html='p class='相册'专辑：' $(数据)。查找(“ALBUM”).text()'/p '；} if($(数据)。查找('艺术家').长度0){ html='p class='artist '演唱：' $(数据)。查找('艺术家').text()'/p '；} html='/div '；html='div class='歌词-容器' html='div class='歌词-容器2'' $(数据)。查找(' LRC ').每个(function(){ html=' p class=' lexis '标记='' $(这个).attr('TAG') ''' $(this).text()'/p '；});html='/div/div '；$ LRC。html(html)；//alert($(数据)。查找(' LRC ').长度);} });} var timer=setInterval(函数(){ var now=new Date()；定义变量已用=现在-开始；if($lrc.find ' .歌词')。长度){ $lrc.find ' ' .歌词')。每个（函数(){ var isOK=已用时间- $(这个).attr('标记');if(isOK 13 isOK 0){ $lrc.find '。歌词')。removeClass("已激活");$(这个)。addClass(')已激活');if($(this).普雷瓦尔('。歌词')。长度3){ $('。歌词-容器2 ')。动画({ ' top ' : '-=30px ' })；//console.log($(this).普雷瓦尔('。歌词')。长度);} } });} },10);});});/脚本/正文/html以上内容是本文给大家详解的基于Java脚本语言怎么实现让歌词滚动播放的全部内容，希望大家喜欢。