http://blog.csdn.net/wk313753744/article/details/38758317

1、该插件是一个jquery的编写的跟jplayer实现歌词同步的插件，最终效果如图：

2、首先引入jplayer的相关的js库和样式文件。

[html] view plaincopy
  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  2. <link href="skin/pink.flag/jplayer.pink.flag.css" rel="stylesheet" type="text/css" />
  3. <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
  4. <script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
  5. <script type="text/javascript" src="js/jquery.jplayer.lyric.js"></script>

3、把我修改的jquery的js文件贴出来，以备以后不能下载的朋友参考实现：

[html] view plaincopy
  1. /*****
  2. *原作mp3player.duapp.com
  3. *修改 ：王坤
  4. *QQ群:151013733
  5. *修改内容说明：在原有基础上，需要使用start方法才能加载歌词，改进之后，在加载jplayer之前调用,显示歌词
  6. */
  7. (function($){
  8. $.lrc = {
  9. handle: null, /* 定时执行句柄 */
  10. list: [], /* lrc歌词及时间轴数组 */
  11. regex: /^[^
    ]∗((?:\s∗\[\d+\d+(?:\.\d+)?

    )+)([\s\S]*)$/, /* 提取歌词内容行 */

  12. regex_time: /
    (\d+)((?:\d+)(?:\.\d+)?)

    /g, /* 提取歌词时间轴 */

  13. regex_trim: /^\s+|\s+$/, /* 过滤两边空格 */
  14. callback: null, /* 定时获取歌曲执行时间回调函数 */
  15. interval: 0.3, /* 定时刷新时间，单位：秒 */
  16. format: '<li>{html}</li>', /* 模板 */
  17. prefixid: 'lrc', /* 容器ID */
  18. hoverClass: 'hover', /* 选中节点的className */
  19. hoverTop: 100, /* 当前歌词距离父节点的高度 */
  20. duration: 0, /* 歌曲回调函数设置的进度时间 */
  21. __duration: -1, /* 当前歌曲进度时间 */
  22. hasLrc:0,/**记录是否有歌词标记**/
  23. //初始化歌词
  24. init: function(txt){
  25. if(typeof(txt) != 'string' || txt.length < 1) return;
  26. /* 停止前面执行的歌曲 */
  27. this.stop();
  28. var item = null, item_time = null, html = '';
  29. /* 分析歌词的时间轴和内容 */
  30. //先按行拆分歌词
  31. txt = txt.split("\n");
  32. //对拆分的每行进行提取时间和歌词内容
  33. for(var i = 0; i < txt.length; i++) {
  34. //获取一行并去掉两端的空格 [00:11.38]如果你眼神能够为我片刻的降临
  35. item = txt[i].replace(this.regex_trim, '');
  36. //然后取出歌词信息
  37. if(item.length < 1 || !(item = this.regex.exec(item))) continue;
  38. while(item_time = this.regex_time.exec(item[1])) {
  39. this.list.push([parseFloat(item_time[1])*60+parseFloat(item_time[2]), item[2]]);
  40. }
  41. this.regex_time.lastIndex = 0;
  42. }
  43. /* 有效歌词 */
  44. if(this.list.length > 0) {
  45. this.hasLrc =1;
  46. /* 对时间轴排序 */
  47. this.list.sort(function(a,b){ return a[0]-b[0]; });
  48. if(this.list[0][0] >= 0.1) this.list.unshift([this.list[0][0]-0.1, '']);
  49. this.list.push([this.list[this.list.length-1][0]+1, '']);
  50. for(var i = 0; i < this.list.length; i++)
  51. html += this.format.replace(/\{html\}/gi, this.list[i][1]);
  52. /* 赋值到指定容器 */
  53. $('#'+this.prefixid+'_list').html(html).animate({ marginTop: 0 }, 100).show();
  54. /* 隐藏没有歌词的层 */
  55. $('#'+this.prefixid+'_nofound').hide();
  56. /* 定时调用回调函数，监听歌曲进度 */
  57. //this.handle = setInterval('$.lrc.jump($.lrc.callback());', this.interval*1000);
  58. }else{ /* 没有歌词 */
  59. this.hasLrc =0;
  60. $('#'+this.prefixid+'_list').hide();
  61. $('#'+this.prefixid+'_nofound').show();
  62. }
  63. },
  64. /* 歌词开始自动匹配 跟时间轴对应 */
  65. /**callback时间 jplayer的当前播放时间**/
  66. start: function(callback) {
  67. this.callback = callback;
  68. /* 有歌词则跳转到歌词时间轴 */
  69. if(this.hasLrc == 1) {
  70. this.handle = setInterval('$.lrc.jump($.lrc.callback());', this.interval*1000);
  71. }
  72. },
  73. /* 跳到指定时间的歌词 */
  74. jump: function(duration) {
  75. if(typeof(this.handle) != 'number' || typeof(duration) != 'number' || !$.isArray(this.list) || this.list.length < 1) return this.stop();
  76. if(duration < 0) duration = 0;
  77. if(this.__duration == duration) return;
  78. duration += 0.2;
  79. this.__duration = duration;
  80. duration += this.interval;
  81. var left = 0, right = this.list.length-1, last = right
  82. pivot = Math.floor(right/2),
  83. tmpobj = null, tmp = 0, thisobj = this;
  84. /* 二分查找 */
  85. while(left <= pivot && pivot <= right) {
  86. if(this.list[pivot][0] <= duration && (pivot == right || duration < this.list[pivot+1][0])) {
  87. //if(pivot == right) this.stop();
  88. break;
  89. }else if( this.list[pivot][0] > duration ) { /* left */
  90. right = pivot;
  91. }else{ /* right */
  92. left = pivot;
  93. }
  94. tmp = left + Math.floor((right - left)/2);
  95. if(tmp == pivot) break;
  96. pivot = tmp;
  97. }
  98. if(pivot == this.pivot) return;
  99. this.pivot = pivot;
  100. tmpobj = $('#'+this.prefixid+'_list').children().removeClass(this.hoverClass).eq(pivot).addClass(thisobj.hoverClass);
  101. tmp = tmpobj.next().offset().top-tmpobj.parent().offset().top - this.hoverTop;
  102. tmp = tmp > 0 ? tmp * -1 : 0;
  103. this.animata(tmpobj.parent()[0]).animate({marginTop: tmp + 'px'}, this.interval*1000);
  104. },
  105. /* 停止执行歌曲 */
  106. stop: function() {
  107. if(typeof(this.handle) == 'number') clearInterval(this.handle);
  108. this.handle = this.callback = null;
  109. this.__duration = -1;
  110. this.regex_time.lastIndex = 0;
  111. this.list = [];
  112. },
  113. animata: function(elem) {
  114. var f = j = 0, callback, _this={},
  115. tween = function(t,b,c,d){ return -c*(t/=d)*(t-2) + b; }
  116. _this.execution = function(key, val, t) {
  117. var s = (new Date()).getTime(), d = t || 500,
  118. b = parseInt(elem.style[key]) || 0,
  119. c = val-b;
  120. (function(){
  121. var t = (new Date()).getTime() - s;
  122. if(t>d){
  123. t=d;
  124. elem.style[key] = tween(t,b,c,d) + 'px';
  125. ++f == j && callback && callback.apply(elem);
  126. return true;
  127. }
  128. elem.style[key] = tween(t,b,c,d)+'px';
  129. setTimeout(arguments.callee, 10);
  130. })();
  131. }
  132. _this.animate = function(sty, t, fn){
  133. callback = fn;
  134. for(var i in sty){
  135. j++;
  136. _this.execution(i,parseInt(sty[i]),t);
  137. }
  138. }
  139. return _this;
  140. }
  141. };
  142. })(jQuery);

4、在jplayer初始化中使用如下：

[html] view plaincopy
  1. $(document).ready(function(){
  2. $("#jquery_jplayer_1").jPlayer({
  3. ready: function () {
  4. //初始化歌词信息(传入歌词文件文本)
  5. $.lrc.init($('#lrc_content').val());
  6. $(this).jPlayer("setMedia", {
  7. title: "Bubble",
  8. mp3: "mp3/林俊杰 - 曹操.mp3"
  9. }).jPlayer("play");
  10. },
  11. timeupdate: function(event) {
  12. if(event.jPlayer.status.currentTime==0){
  13. time = "";
  14. }else {
  15. time = event.jPlayer.status.currentTime;
  16. }
  17. },
  18. play: function(event) {
  19. //点击开始方法调用lrc.start歌词方法 返回时间time
  20. if($('#lrc_content').val()!==""){
  21. $.lrc.start(function(){
  22. return time;
  23. });
  24. }else{
  25. $(".content").html("没有字幕");
  26. }
  27. },
  28. swfPath: "js",
  29. supplied: "mp3",
  30. wmode: "window",
  31. smoothPlayBar: true,
  32. keyEnabled: true,
  33. remainingDuration: true,
  34. toggleDuration: true
  35. });
  36. });

5、这一步不是必要的 只是提供一个我的源码给你们参考：

[html] view plaincopy
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>QQ群：845885222 完整jplayer歌词同步demo</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <link href="skin/pink.flag/jplayer.pink.flag.css" rel="stylesheet" type="text/css" />
  7. <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
  8. <script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
  9. <script type="text/javascript" src="js/jquery.jplayer.lyric.js"></script>
  10. <style type="text/css">
  11. *{ margin:0; padding:0; }
  12. ul, ol, dl { list-style:none; }
  13. .content li.hover{color:red; }
  14. .content{ width:200px;overflow:hidden;padding:10px; text-align: center; font-size:12px;}
  15. </style>
  16. <script type="text/javascript">
  17. //<![CDATA[
  18. $(document).ready(function(){
  19. $("#jquery_jplayer_1").jPlayer({
  20. ready: function () {
  21. //初始化歌词信息(传入歌词文件文本)
  22. $.lrc.init($('#lrc_content').val());
  23. $(this).jPlayer("setMedia", {
  24. title: "Bubble",
  25. mp3: "mp3/林俊杰 - 曹操.mp3"
  26. }).jPlayer("play");
  27. },
  28. timeupdate: function(event) {
  29. if(event.jPlayer.status.currentTime==0){
  30. time = "";
  31. }else {
  32. time = event.jPlayer.status.currentTime;
  33. }
  34. },
  35. play: function(event) {
  36. //点击开始方法调用lrc.start歌词方法 返回时间time
  37. if($('#lrc_content').val()!==""){
  38. $.lrc.start(function(){
  39. return time;
  40. });
  41. }else{
  42. $(".content").html("没有字幕");
  43. }
  44. },
  45. swfPath: "js",
  46. supplied: "mp3",
  47. wmode: "window",
  48. smoothPlayBar: true,
  49. keyEnabled: true,
  50. remainingDuration: true,
  51. toggleDuration: true
  52. });
  53. });
  54. //]]>
  55. </script>
  56. </head>
  57. <body>
  58. <!--textarea只是用来存储歌词信息 并不做显示，如果要修改显示样式，修改id="lrc_list"的样式就行-->
  59. <textarea id="lrc_content" style="display:none;">
  60. [ti:曹操]
  61. [ar:林俊杰]
  62. [al:曹操]
  63. [00:00.03]林俊杰-《曹操》
  64. [00:13.35]作词：林秋离
  65. [00:20.12]作曲：林俊杰
  66. [00:25.32]
  67. [01:33.46][00:26.82]不是英雄 不读三国
  68. [01:40.12][00:33.43]若是英雄 怎么能不懂寂寞
  69. [02:39.68][01:46.34][00:39.63]独自走下长坂坡 月光太温柔
  70. [02:43.20][01:49.82][00:43.15]曹操不啰嗦 一心要那荆州
  71. [02:46.75][01:53.48][00:46.83]用阴谋 阳谋 明说 暗夺的摸
  72. [02:53.44][02:00.10][00:53.50]东汉末年分三国
  73. [02:56.37][02:03.15][00:56.52]烽火连天不休
  74. [03:00.12][02:06.75][01:00.17]儿女情长 被乱世左右
  75. [03:05.04][02:11.71][01:05.12]谁来煮酒
  76. [03:06.78][02:13.45][01:06.84]尔虞我诈是三国
  77. [03:09.85][02:16.43][01:09.73]说不清对与错
  78. [03:13.38][02:20.11][01:13.48]纷纷扰扰 千百年以後
  79. [03:18.44][02:25.06][01:18.45]一切又从头
  80. [03:25.99][02:30.17][01:26.81]喔……
  81. [88:88:88]
  82. </textarea>
  83. <div id="jquery_jplayer_1" class="jp-jplayer"></div>
  84. <div id="jp_container_1" class="jp-audio">
  85. <div class="jp-type-single">
  86. <div class="jp-gui jp-interface">
  87. <ul class="jp-controls">
  88. <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
  89. <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
  90. <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
  91. <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
  92. <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
  93. <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
  94. </ul>
  95. <div class="jp-progress">
  96. <div class="jp-seek-bar">
  97. <div class="jp-play-bar"></div>
  98. </div>
  99. </div>
  100. <div class="jp-volume-bar">
  101. <div class="jp-volume-bar-value"></div>
  102. </div>
  103. <div class="jp-current-time"></div>
  104. <div class="jp-duration"></div>
  105. <ul class="jp-toggles">
  106. <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
  107. <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
  108. </ul>
  109. </div>
  110. <div class="jp-details">
  111. <ul>
  112. <li><span class="jp-title"></span></li>
  113. </ul>
  114. </div>
  115. <div class="jp-no-solution">
  116. <span>Update Required</span>
  117. 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>.
  118. </div>
  119. </div>
  120. </div>
  121. <div class="content">
  122. <ul id="lrc_list">
  123. 加载歌词……
  124. </ul>
  125. </div>
  126. </body>
  127. </html>

6、最后还是要提供下载地址：

微云下载歌词同步插件  （密码：LSm1）

csdn 下载：http://download.csdn.net/detail/wk313753744/7803013

转载于:https://www.cnblogs.com/jixu8/p/4313091.html

Jplayer歌词同步显示插件相关推荐

  1. Jplayer歌词同步显示插件(在以前别人基础上修改)

    1.该插件是一个jquery的编写的跟jplayer实现歌词同步的插件,最终效果如图: 2.首先引入jplayer的相关的js库和样式文件. <meta http-equiv="Con ...

  2. 网页中LRC歌词同步显示

    <html><head> <title>音乐歌词同步测试</title> <style> <!-- .div { width:460p ...

  3. android简单歌词,《Android_MP3播放器(初学简单版_歌名、歌手、歌词同步显示)》.doc...

    Android_MP3播放器(初学简单版) --乐拐 这是我学习Android以来的第二个程序--MP3播放器(简单版),我的第一个程序是比较实用的通讯录(文档地址是:/view/d013f64fc8 ...

  4. Android 实现歌曲播放时歌词同步显示

    我们需要读取以上歌词文件的每一行转换成成一个个歌词实体: public class LyricObject { public int begintime; // 开始时间 public int end ...

  5. android 歌词解析 依赖,Android实现歌曲播放时歌词同步显示具体思路

    我们需要读取以上歌词文件的每一行转换成成一个个歌词实体: 代码如下: public class LyricObject { public int begintime; // 开始时间 public i ...

  6. python播放音乐同步歌词_linux 下 python 调用 mplayer 解析歌词同步播放显示

    标签: 加载同目录同名歌词同步显示 #!/usr/bin/python # -*- coding: utf-8 -*- import sys, os, time, subprocess, re, ch ...

  7. TextView实现歌词同步《IT蓝豹》

    2019独角兽企业重金招聘Python工程师标准>>> 利用TextView实现歌词同步显示,这是一个简单的利用TextView实现滚动实时显示歌词的. 里面的内容都已经写上了详细的 ...

  8. android 歌词同步 换行,HTML5音乐播放器同步显示歌词

    歌词文件的格式 实现之前,当然得了解一下歌词文件的格式了.常规歌词文件的格式基本是一句一行,每行由两部分组成,前面是中括号括起来的时间轴,后面紧跟歌词,像下面这样:[ti:记兰生襄铃] [ar:HIT ...

  9. javafx音乐播放器----歌词同步实时显示（包含获取酷我歌词方式，歌词同步方法）

    首先我是爬虫获取的酷我的音源,因此歌词也是通过爬虫获取的,下面这个方法可以获取到歌曲对应的歌词信息.简单说下,在搜索歌曲之后会返回一个歌曲列表,查看源代码是包含在li标签里面的,这个li标签里面就有请 ...

最新文章

  1. 【控制】《多无人机协同控制技术》周伟老师-第4章-基于 PID 的无人机编队运动控制策略
  2. DCMTK：简单存储服务类用户
  3. javq接口_Java的接口及实例
  4. Java左上到右下,java – 如何从上到下然后从左到右填充Gri...
  5. flask 安装flask_resultful
  6. 【Day04】介绍防抖节流原理、区别以及应用，并用 JavaScript 进行实现
  7. sgu 106 The equation ★★(线性方程ax+by=c限制区间的解)
  8. 第五章 mybatis批量更新update
  9. ASP.NET笔记（二）
  10. windows环境下安装npm、cnpm、bower
  11. Re0:DP学习之路 01背包如何打印路径？
  12. window无法启动windows Firewall
  13. 2016年CIO要掌握五大新思维
  14. 使用STAR构建参考基因组并比对
  15. android 炫酷图案解锁,16个超级漂亮的手机锁屏图案，炫酷到飞起，总有一款适合你...
  16. AI+IoT行业“飞轮效应”凸显，全球云服务能力将发挥关键作用
  17. [TOOLS]confluence添加word宏显示上传的word文档
  18. pymc3学生成绩分析和预测（补充+翻译）
  19. Mstar的Monitor方案OSD 菜单制作(五)——icon绘制
  20. ＜C++＞详解类对象作为类成员时调用构造和析构的时机及静态成员解释

热门文章

  1. MySQL及命令大全
  2. mysql答题闯关题库
  3. 数学软件四大家族—MATLAB、MathCAD、Maple 和 Mathematica 优缺点比较
  4. wordpress显示ICP备案号和公安备案
  5. Python基础 3.5 HTML CSS JS 和 JQuery
  6. requests下载视屏
  7. dataTable自定义搜索框位置
  8. 数学建模算法总结——04层次分析法
  9. 顺丰2020年财报幕后：不可轻视的科技力量和新增长曲线
  10. 缓存的6种常见的使用场景