java 滚动歌词_基于JavaScript怎么实现让歌词滚动播放

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

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

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

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

Player

#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;

}

$(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 += '

';

if($(data).find('TITLE').length > 0){

html += '

歌曲：' + $(data).find('TITLE').text()+'

';

}

if($(data).find('ALBUM').length > 0){

html += '

专辑：' + $(data).find('ALBUM').text()+'

';

}

if($(data).find('ARTIST').length > 0){

html += '

演唱：' + $(data).find('ARTIST').text()+'

';

}

html += '

';

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 < 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);

});

});

以上内容是本文给大家详解的基于JavaScript怎么实现让歌词滚动播放的全部内容，希望大家喜欢。