<style type="text/css">
.lrcBox{position:relativeheight:400pxwidth:400pxdisplay:blockoverflow:hiddenborder:1px solid #60Ffont-size:12px}
.lrcBox .top{display:blockposition:absoluteheight:30pxwidth:100%top:0pxz-index:2background:url(lrc_cover_big_04640cde.png) no-repeat left top}
.lrcBox .warp{display:blockpadding:10pxbackground-color:#fffheight:100%}
.lrcBox .body{display:bolockwidth:100%height:100%background-color:#39F}
.lrcBox .body ul,.lrcBox .body li{display:blocklist-style:nonepadding:0margin:0text-align:center}
.lrcBox .body ul{ width:100%}
.lrcBox .body li{ padding-top:3pxpadding-bottom:3px}
.lrcBox .bottom{display:blockposition:absoluteheight:30pxwidth:100%bottom:0pxz-index:2background:url(lrc_cover_big_04640cde.png) no-repeat left bottom}
</style>
<div class="lrcBox">
<!--上边的渐变背景层-->
<div class="top"></div>
<!--歌词层-->
<div class="warp">
<div class="body">
<ul>
<li>这里是一行歌词</li>
<li>这里是一行歌词</li>
<li>这里是一行歌词</li>
</ul>
</div>
</div>
<!--下边的渐变背景层-->
<div class="bottom"></div>
</div>
至于lrc_cover_big_04640cde.png这张图片你可以自己做，也可以到百度首页随心听的图片资源中找到，下载就可以。
<!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>
