歌词联动

最新推荐文章于 2024-05-13 21:12:10 发布

转载最新推荐文章于 2024-05-13 21:12:10 发布 · 301 阅读

文章标签：

#lyric

<%@ 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>