<!DOCTYPE HTML>
<html>
<head>
<title>QQ:13661014724 完整jplayer歌词同步demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="skin/pink.flag/jplayer.pink.flag.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.lyric.js"></script>
<style type="text/css">
*{ margin:0; padding:0; }
ul, ol, dl { list-style:none; }
.content li.hover{color:red; }
.content{ width:200px;overflow:hidden;padding:10px; text-align: center; font-size:12px;}
</style>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
//初始化歌词信息(传入歌词文件文本)
$.lrc.init($('#lrc_content').val());
$(this).jPlayer("setMedia", {
title: "Bubble",
mp3: "mp3/林俊杰 - 曹操.mp3"
}).jPlayer("play");
},
timeupdate: function(event) {
if(event.jPlayer.status.currentTime==0){
time = "";
}else {
time = event.jPlayer.status.currentTime;
}
},
play: function(event) {
//点击开始方法调用lrc.start歌词方法 返回时间time
if($('#lrc_content').val()!==""){
$.lrc.start(function(){
return time;
});
}else{
$(".content").html("没有字幕");
}
},
swfPath: "js",
supplied: "mp3",
wmode: "window",
smoothPlayBar: true,
keyEnabled: true,
remainingDuration: true,
toggleDuration: true
});
});
//]]>
</script>
</head>
<body>
<!--textarea只是用来存储歌词信息 并不做显示,如果要修改显示样式,修改id="lrc_list"的样式就行-->
<textarea id="lrc_content" style="display:none;">
[ti:曹操]
[ar:林俊杰]
[al:曹操]
[00:00.03]林俊杰-《曹操》
[00:13.35]作词:林秋离
[00:20.12]作曲:林俊杰
[00:25.32]
[01:33.46][00:26.82]不是英雄 不读三国
[01:40.12][00:33.43]若是英雄 怎么能不懂寂寞
[02:39.68][01:46.34][00:39.63]独自走下长坂坡 月光太温柔
[02:43.20][01:49.82][00:43.15]曹操不啰嗦 一心要那荆州
[02:46.75][01:53.48][00:46.83]用阴谋 阳谋 明说 暗夺的摸
[02:53.44][02:00.10][00:53.50]东汉末年分三国
[02:56.37][02:03.15][00:56.52]烽火连天不休
[03:00.12][02:06.75][01:00.17]儿女情长 被乱世左右
[03:05.04][02:11.71][01:05.12]谁来煮酒
[03:06.78][02:13.45][01:06.84]尔虞我诈是三国
[03:09.85][02:16.43][01:09.73]说不清对与错
[03:13.38][02:20.11][01:13.48]纷纷扰扰 千百年以後
[03:18.44][02:25.06][01:18.45]一切又从头
[03:25.99][02:30.17][01:26.81]喔……
[88:88:88]
</textarea>
<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-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 class="jp-details">
<ul>
<li><span class="jp-title"></span></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 class="content">
<ul id="lrc_list">
加载歌词……
</ul>
</div>
</body>
</html>
评论9