參照http://blog.chinaunix.net/uid-26209648-id-3243415.html
多謝作者貼出代碼，無私奉獻
<%@ page language="java" pageEncoding="UTF-8"%>
<% String path = request.getContextPath(); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jplayer實現滾動歌詞 </title>
<link href="<%=path%>/Jplayer/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="<%=path%>/Jplayer/js/jquery.jplayer.min.js"></script>
<script type="text/javascript">
var playTime;
window.lrc_obj = null;
$(document).ready(function() {
$("#jquery_jplayer_1").jPlayer({
ready: function () {
var lrc="[ar:姜玉陽][ti:痛徹心扉][00:02.43]痛徹心扉[00:07.67]製作 曾經擁有[00:13.81]希望你快樂 QQ511277376[00:28.03]怎麼能夠讓我不再想你[00:36.00]也許愛你愛到最後只能傷心[00:42.76]已經有了離開你的勇氣[00:48.44]在我的夢裏你不是唯一[00:55.50]我想要再回到你溫暖的懷裏[01:02.31]感覺你的心跳你的呼吸[01:08.96]想到天長地久對於我們[01:13.38]渴望而不可及[01:15.92]難道命運註定就此分離[01:26.28]愛你 痛徹我心扉[01:32.27]給了你 僅有的一片天[01:38.47]回憶的碎片[01:40.85]撞翻我心中思念的火蕊[01:45.83]燃燒我整座的堡壘[01:51.42]愛你 痛徹我心扉[01:58.88]少了你 還殘留一片天[02:05.13]我想我只會[02:07.57]緊握住手中凋零的玫瑰[02:12.64]品嚐你賜給的淚水[02:18.89]或許你曾爲我流淚[02:25.44]如今你讓我痛徹心扉[02:48.09]我想要再回到你溫暖的懷裏[03:05.66]感覺你的心跳你的呼吸[03:12.21]想到天長地久對於我們[03:16.83]渴望而不可及[03:19.27]難道命運註定就此分離[03:29.38]愛你 痛徹我心扉[03:35.62]給了你 僅有的一片天[03:41.82]回憶的碎片[03:44.26]撞翻我心中思念的火蕊[03:49.29]燃燒我整座的堡壘[03:56.45]愛你 痛徹我心扉[04:02.19]少了你 還殘留一片天[04:08.43]我想我只會[04:10.87]緊握住手中凋零的玫瑰[04:15.90]品嚐你賜給的淚水[04:22.20]或許你曾爲我流淚[04:28.90]如今你讓我痛徹心扉[04:35.55]如今你讓我痛徹心扉";
change_lrc(lrc);
$(this).jPlayer("setMedia", {
mp3: '<%=path%>/Jplayer/mp3/2.mp3'
}).jPlayer("play");
},
timeupdate : function (obj){
show_lrc(obj.jPlayer.status.currentTime);
playTime = obj.jPlayer.status.currentTime;
},
ended: function (event) {
$(this).jPlayer("play");
},
swfPath: "<%=path%>/Jplayer/js",
supplied: "mp3,oga",
wmode: "window"
});
});
//把歌詞轉換成時間和歌詞內容的一個數組
function change_lrc (data)
{
//alert(data);
window.lrc_item = -1;//重置歌詞下標
$('#lrc_panel').html('歌詞解析中...');
var lrc = [{time:0, lrc:''}];
var match = data.match(/\[ *ti *\:([^\[\]]+)\]/i);
if (match) lrc[0].lrc += '歌名:' + match[1] + "<br/>";//歌名
var match = data.match(/\[ *ar *\:([^\[\]]+)\]/i);
if (match) lrc[0].lrc += '詞:' + match[1] + "<br/>";//作詞
var match = data.match(/\[ *cm *\:([^\[\]]+)\]/i);
if (match) lrc[0].lrc += '曲:' + match[1] + "<br/>";//作曲
var match = data.match(/\[ *al *\:([^\[\]]+)\]/i);
if (match) lrc[0].lrc += ' 專輯:' + match[1] + "<br/>";//專輯
var match = data.match(/\[ *sr *\:([^\[\]]+)\]/i);
if (match) lrc[0].lrc += ' 歌手:' + match[1] + "<br/>";//歌手
var offset = 0;
var match = data.match(/\[ *offset *\:(\d+)\]/i);
if (match) offset = match[1] / 1000;//時間調整
var match = data.match(/(\[ *[\d\:\.]+ *\][^\[\]]+)/g);
if (match){
for (var i = 0; i < match.length; i++){
//alert(match[i]);
var temp = match[i].split(']');
var temp_lrc = temp[1];
temp = temp[0].replace('[', '');
temp = temp.split(':');
var time = 0;
time += temp[temp.length - 1] * 1;//秒
if (temp.length > 1) time += temp[temp.length - 2] * 60;///分
if (temp.length > 2) time += temp[temp.length - 3] * 3600;///時
if (time != 0) time += offset;//只有非0歌詞纔有必要加調整;
//alert(time + ':' + temp_lrc);
if (lrc[lrc.length -1].time == time) lrc[lrc.length -1].lrc += ' ' + temp_lrc + "<br/>";//相同時間合併
else lrc[lrc.length] = {time:time, lrc:temp_lrc + "<br/>"};//按獲取順序記錄,如果lrc是亂序將導致後面顯示錯誤
}
}
window.lrc_obj = lrc;//處理好再複製
//alert(lrc[57].lrc);
show_lrc (0);//顯示歌曲信息
}
/*
* 顯示歌詞,並得到正在播放歌詞的下標,
* param:sec 歌詞對應的秒.
*/
function show_lrc (sec){
if (!window.lrc_obj) return 0;
if ( window.lrc_obj[window.lrc_obj.length-1].time < sec ){
if (window.lrc_item < window.lrc_obj.length){
window.lrc_item = window.lrc_obj.length;
center_lrc(window.lrc_obj.length - 1);//顯示尾句
}
return 0;//顯示到最後一句
}else if (window.lrc_item < 0){//初始化,且需要刷新歌詞
window.lrc_item = 1;
center_lrc(0);//顯示第一句
if (sec < window.lrc_obj[window.lrc_item].time) return 0;//處於第二句前
}
if ( (window.lrc_obj[window.lrc_item - 1].time <= sec) && (sec < window.lrc_obj[window.lrc_item].time) ){
return 0;//當前時間處於當前顯示句之後,後一句之前,無需要刷新歌詞
}
if (window.lrc_obj[window.lrc_item].time < sec){//歌詞過時了,自動播放或拉進度到後面
do
{
window.lrc_item++;
}while ( (window.lrc_item <= window.lrc_obj.length) && (window.lrc_obj[window.lrc_item].time < sec) )
center_lrc(window.lrc_item - 1);//顯示後面對應一句
return 0;
}else{//歌詞過快,如拉前了
do
{
window.lrc_item--;
}while ( (0 <= window.lrc_item) && (sec < window.lrc_obj[window.lrc_item].time) )
window.lrc_item++;
center_lrc(window.lrc_item - 1);//顯示前面對應一句
return 0;
}
}
/*
* 得到正在播放的歌詞
* index 是數組的下標值.
*/
function center_lrc(index)
{
if (! window.lrc_obj || (index >= window.lrc_obj.length ) || (index < 0) ) return 0;
var padding = 10;//居中頭尾個數
var lrc_html = '';
for(var m = 0; m <= window.lrc_obj.length - 1; m++) {
if(index != m) {
if(window.lrc_obj[m].lrc == '') {
lrc_html += '<li style= "list-style-type:none;">........</li>';
} else {
lrc_html += '<li style= "list-style-type:none;">' + window.lrc_obj[m].lrc + '</li>';
}
} else if(index == m) {
if(window.lrc_obj[m].lrc == '') {
lrc_html += '<li id="crly" style= "list-style-type:none;"><font color="blue">........</font></li>';
} else {
lrc_html += '<li id="crly" style= "list-style-type:none;"><font color="purple">' + window.lrc_obj[m].lrc + '</font></li>';
}
}
}
//var lp = document.getElementById('lyrics');
//lp.scrollTop=lp.scrollHeight;
//alert(lrc_html);
$('#lrc_panel').get(0).innerHTML = lrc_html;
var lp = document.getElementById("lyrics");
var lh = $("#crly").position().top;
lp.scrollTop+=parseInt(lh) - 80;
}
</script>
<style>
<!--
.lyrics{
font-size: 13px;
color:#f7b607
}
-->
</style>
</head>
<body>
<div style="float: left">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<ul class="jp-toggles">
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
</ul>
</div>
</div>
<div class="jp-title">
<ul>
<li>痛徹心扉</li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>
</div>
<div class="lyrics" id="lyrics" style="overflow: scroll; width: 255px; height: 275px; float:right">
<strong></strong>
<ul id="lrc_panel" ></ul>
</div>
</body>
</html>
http://blog.chinaunix.net/uid-26209648-id-3243415.html