<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>
有三种方法：1、做成GIF动画图片，方法：在一张图片上加一图层，写上字，让字移动。按L+SHIFT+M会进入Imageready，在帧里会看到gif的每个跳转画面。
2、做成flash动画，方法：在时间轴里建一层放歌词的层，首先要试听歌曲，看看第一句在哪一帧上结束，在开始播放歌曲的那一帧起到要显示的歌曲第一句的最后一帧上， 在最后一帧上做出插入关键帧，然后设置运话补间就做到同步了。
3、用网页代码，如html或css，依然是图片为背景，文字动作。大致方法：用div+css+js实现的，用后台代码(asp/php)分析出lrc文件播放段与歌词数组，然后分析前台播放对应的时间，突显的当歌词。这是原理，网上很多代码可以实现的。
