Chinaunix首页 | 论坛 | 博客

技术之家guarx.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

guarx

  • 博客访问： 636521
  • 博文数量： 17
  • 博客积分： 248
  • 博客等级： 二等列兵
  • 技术积分： 237
  • 用 户 组： 普通用户
  • 注册时间： 2011-08-26 12:13
个人简介

别让往昔的悲伤和对未来的恐惧，毁了你当下的幸福。

文章分类

全部博文（17）

文章存档

2013年（6）

2012年（2）

2011年（9）

我的朋友
最近访客
推荐博文
相关博文
jplayer实现滚动歌词

分类： Python/Ruby

2012-06-14 16:11:47

最近想买在做网站需要实现滚动歌词的效果，网上收集了下资料，改了下成功实现。项目采用了spring+mvc+mysql+jquery的架构，项目管理用的maven，在这我简化了代码，就一个jsp能实现效果，至于jplayer的使用上官网看看文档或者上网找找资料也就OK了，下面是jsp的代码：

点击(此处)折叠或打开

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <%@ page language="java" contentType="text/html; charset=UTF-8"
  3.     pageEncoding="UTF-8"%>
  4. <%@ taglib uri="" prefix="c" %>
  5. <%@ taglib uri="" prefix="fmt" %>
  6. <%@ taglib prefix="form" uri="" %>
  7. <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' ''>
  8. <html xmlns='' lang='en' xml:lang='en'>
  9. <head>

  11. <title></title>
  12. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  13. <link href="skin/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />

  15. <script type="text/javascript" src="js/jquery.js"></script>
  16. <script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
  17. <script type="text/javascript" src="js/player.js"></script>
  18. <script type="text/javascript">
  19. var playTime;
  20. window.lrc_obj = null;//评论对象
  21. $(document).ready(function() {
  22.     
  23.     $("#jquery_jplayer_1").jPlayer({
  24.         ready: function () {
  25.             var lrc="[ti:长城][ar:BEYOND][cm:]黄家驹[al:真的爱你][sr:BEYOND][00:00]长城[00:26][01:00]遥远的东方[01:01]辽阔的边疆[01:02]还有远古的破墙[01:06]前世的沧桑[01:07]后世的风光[01:09]万里千山牢牢接壤[01:12]围着老去的国度[01:15]围着事实的真相[01:18]围着浩瀚的岁月[01:21]围着欲望与理想";
  26.             change_lrc(lrc);
  27.             $(this).jPlayer("setMedia", {
  28.                 //mp3: '${rescFileServerUrl}${song.rescLoc}',
  29.                 mp3: 'media/cc.mp3',
  30.                 oga: ""
  31.             }).jPlayer("play");
  32.         },
  33.         
  34.         timeupdate : function (obj){
  35.             show_lrc(obj.jPlayer.status.currentTime);
  36.             playTime = obj.jPlayer.status.currentTime;
  37.         },
  38.         
  39.         ended: function (event) {
  40.             $(this).jPlayer("play");
  41.         },

  43.         swfPath: "js",
  44.         solution: "flash, html",
  45.         supplied: "ogv, m4v, oga, mp3, wav, m4a, webma"
  46.     });
  47. });

  49. //把歌词转换成时间和歌词内容的一个数组
  50. function change_lrc (data)
  51. {
  52.      //alert(data);
  53.   window.lrc_item = -1;//重置歌词下标
  54.   $('#lrc_panel').html('歌词解析中...');
  55.   var lrc = [{time:0, lrc:''}];
  56.   var match = data.match(/\[ *ti *\:([^\[\]]+)\]/i);
  57.   if (match) lrc[0].lrc += '歌名:' + match[1] + "
    "    ;//歌名
  58.   
  59.   var match = data.match(/\[ *ar *\:([^\[\]]+)\]/i);
  60.   if (match) lrc[0].lrc += '词:' + match[1] + "
    "    ;//作词
  61.   
  62.   var match = data.match(/\[ *cm *\:([^\[\]]+)\]/i);
  63.   if (match) lrc[0].lrc += '曲:' + match[1] + "
    "    ;//作曲
  64.   
  65.   
  66.   var match = data.match(/\[ *al *\:([^\[\]]+)\]/i);
  67.   if (match) lrc[0].lrc += '  专辑:' + match[1] + "
    "    ;//专辑
  68.   
  69.   var match = data.match(/\[ *sr *\:([^\[\]]+)\]/i);
  70.   if (match) lrc[0].lrc += '  歌手:' + match[1] + "
    "    ;//歌手
  71.  
  72.   
  73.   var offset = 0;
  74.   var match = data.match(/\[ *offset *\:(\d+)\]/i);
  75.   if (match) offset = match[1] / 1000;//时间调整
  76.   
  77.   
  78.   var match = data.match(/(\[ *[\d\:\.]+ *\][^\[\]]+)/g);
  79.   if (match){
  80.     for (var i = 0; i < match.length; i++){
  81.       //alert(match[i]);
  82.       var temp = match[i].split(']');
  83.       var temp_lrc = temp[1];
  84.       temp = temp[0].replace('[', '');
  85.       temp = temp.split(':');
  86.       var time = 0;
  87.       time += temp[temp.length - 1] * 1;//秒
  88.       if (temp.length > 1) time += temp[temp.length - 2] * 60;///分
  89.       if (temp.length > 2) time += temp[temp.length - 3] * 3600;///时
  90.       
  91.       if (time != 0) time += offset;//只有非0歌词才有必要加调整;
  92.       //alert(time + ':' + temp_lrc);
  93.       
  94.       if (lrc[lrc.length -1].time == time) lrc[lrc.length -1].lrc += '  ' + temp_lrc + "
    "    ;//相同时间合并
  95.       else lrc[lrc.length] = {time:time, lrc:temp_lrc + "
    "    };//按获取顺序记录,如果lrc是乱序将导致后面显示错误
  96.     }
  97.   }
  98.   
  99.   window.lrc_obj = lrc;//处理好再复制
  100.   //alert(lrc[57].lrc);
  101.   show_lrc (0);//显示歌曲信息
  102. }

  104. /*
  105.  * 显示歌词,并得到正在播放歌词的下标,
  106.  * param:sec 歌词对应的秒.
  107.  */
  108. function show_lrc (sec){
  109.      if (!window.lrc_obj) return 0;
  110.     
  111.      if ( window.lrc_obj[window.lrc_obj.length-1].time < sec ){
  112.      if (window.lrc_item < window.lrc_obj.length){
  113.      window.lrc_item = window.lrc_obj.length;
  114.      center_lrc(window.lrc_obj.length - 1);//显示尾句
  115.      }
  116.     
  117.      return 0;//显示到最后一句
  118.      }else if (window.lrc_item < 0){//初始化,且需要刷新歌词
  119.      window.lrc_item = 1;
  120.      center_lrc(0);//显示第一句
  121.     
  122.      if (sec < window.lrc_obj[window.lrc_item].time) return 0;//处于第二句前
  123.      }
  124.     
  125.      if ( (window.lrc_obj[window.lrc_item - 1].time <= sec) && (sec < window.lrc_obj[window.lrc_item].time) ){
  126.      return 0;//当前时间处于当前显示句之后,后一句之前,无需要刷新歌词
  127.      }
  128.     
  129.      if (window.lrc_obj[window.lrc_item].time < sec){//歌词过时了,自动播放或拉进度到后面
  130.      do
  131.      {
  132.      window.lrc_item++;
  133.      }while ( (window.lrc_item <= window.lrc_obj.length) && (window.lrc_obj[window.lrc_item].time < sec) )
  134.     
  135.      center_lrc(window.lrc_item - 1);//显示后面对应一句
  136.      return 0;
  137.      }else{//歌词过快,如拉前了
  138.      do
  139.      {
  140.      window.lrc_item--;
  141.      }while ( (0 <= window.lrc_item) && (sec < window.lrc_obj[window.lrc_item].time) )
  142.     
  143.      window.lrc_item++;
  144.      center_lrc(window.lrc_item - 1);//显示前面对应一句
  145.      return 0;
  146.     
  147.      }
  148. }

  150. /*
  151.  * 得到正在播放的歌词
  152.  * index 是数组的下标值.
  153.  */
  154. function center_lrc(index)
  155. {
  156.       if (! window.lrc_obj || (index >= window.lrc_obj.length ) || (index < 0) ) return 0;
  157.       var padding = 10;//居中头尾个数
  158.       var lrc_html = '';
  159.  
  160.       /* for (var i = 1; i <= padding ; i++){
  161.            if (index - i >= 0){
  162.             lrc_html += '
  163. ' + window.lrc_obj[index-i].lrc + '
    164. ';
  164.            }else lrc_html += '
  165. ';//不足补空,点位
  166.       }
  167.       var focusLrc = window.lrc_obj[index].lrc;
  168.       
  169.       //alert('"' + foucusLrc + '"');
  170.       if(focusLrc == '
    '    ) {
  171.         lrc_html += '
  172. ........
    173. ';
  173.       } else {
  174.           lrc_html += '
  175. ' + focusLrc + '
    176. ';
  176.       }
  177.       
  178.       for (var i = 1; i <= padding ; i++){
  179.          if (index + i < window.lrc_obj.length){
  180.            //lrc_html += '
  181. [' + (index + i) + '|' + parseInt(window.lrc_obj[index+i].time) + ']' + window.lrc_obj[index+i].lrc + '
    182. ';
  182.            lrc_html += '
  183. ' + window.lrc_obj[index+i].lrc + '
    184. ';
  184.           }else lrc_html += '
  185. ';//不足补空,点位
  186.       } */
  187.       
  188.       for(var m = 0; m <= window.lrc_obj.length - 1; m++) {
  189.          if(index != m) {
  190.             
  191.              if(window.lrc_obj[m].lrc == '
    '    ) {
  192.          lrc_html += '
  193. ........
    194. ';
  194.      } else {
  195.          lrc_html += '
  196. ' + window.lrc_obj[m].lrc + '
    197. ';
  197.      }
  198.          } else if(index == m) {
  199.             
  200.              if(window.lrc_obj[m].lrc == '
    '    ) {
  201.                 lrc_html += '
  202. ........
    203. ';
  203.               } else {
  204.                   lrc_html += '
  205. ' + window.lrc_obj[m].lrc + '
    206. ';
  206.               }
  207.            }
  208.       }
  209.       //var lp = document.getElementById('lyrics');
  210.       //lp.scrollTop=lp.scrollHeight;
  211.       
  212.       $('#lrc_panel').get(0).innerHTML = lrc_html;
  213.       var lp = document.getElementById("lyrics");
  214.       var lh = $("#crly").position().top;
  215.       lp.scrollTop+=parseInt(lh) - 80;
  216. }

  218. </script>
  219. </head>
  220. <body>
  221.     

  223.     <div id="jquery_jplayer_1" class="jp-jplayer"></div>

  225.         <div class="jp-video-270p">
  226.             <div class="jp-type-single">
  227.                 <div id="jp_interface_1" class="jp-interface">
  228.                     <ul class="jp-controls">
  229.                         <li><a href="#" class="jp-play" tabindex="1">play</a></li>
  230.                         <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>



  234.                     </ul>








  243.                 </div>
  244.             </div>
  245.         </div>
  246.         </div>          
  247.     <div class="lyrics" id="lyrics" style="overflow: scroll; width: 255px; height: 275px;">
  248.            <strong></strong> 
  249.            <ul id="lrc_panel" ></ul>
  250.     </div>
  251. </body>
  252. </html>


    • 歌词显示有两种方式：1.歌词全部显示，播放的歌词高亮，有个scroll自动滚动的问题，2.只显示歌词前后几句，没有scroll的问题，
    阅读(6048) | 评论(3) | 转发(0) |
    0

    上一篇：Maven 学习笔记后续

    下一篇：left jion 时候on的条件字段在左表有重复情况

    给主人留下些什么吧！~~

    ze_lin_huang2013-04-20 18:02:41

    fooklook：我想问一下，为什么在火狐浏览器上就不能播放mp3格式的音乐呢？

    播放mp3格式的音乐好像要在服务器环境才可以，还有注意swfPath: "<%=path%>/Jplayer/js",路径是否正确

    回复 | 举报

    guarx2013-04-19 12:21:42

    fooklook：我想问一下，为什么在火狐浏览器上就不能播放mp3格式的音乐呢？

    可以的，你打开fireBug看看有没有错误信息。

    回复 | 举报

    fooklook2013-04-12 08:37:56

    我想问一下，为什么在火狐浏览器上就不能播放mp3格式的音乐呢？

    回复 | 举报
    关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

    Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

    感谢所有关心和支持过ChinaUnix的朋友们

    16024965号-6