论坛首页 → Web前端技术论坛 →

网页音乐播放器

浏览 3010 次
锁定老帖子 主题：网页音乐播放器
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • Java编程思想
  • 等级: 初级会员
  • 性别:
  • 文章: 11
  • 积分: 70
  • 来自: 北京
   发表时间：2014-01-03  

js代码
把歌词文件解析成数组

Java代码  收藏代码
  1. function get( lyrics ){  
  2.    
  3.                        var l= lyrics;  
  4.                 
  5.                        var reg_soundname =/\[ti:(.+?)\]/i;  
  6.                    
  7.                        var reg_singer=/\[ar:(.+?)\]/i;  
  8.                     
  9.                        var reg_CD =/\[al:(.+?)\]/i;  
  10.                     
  11.                        var reg_maker =/\[(by:.+?)\]/i;  
  12.                          
  13.                        var arr_soundname = l.match(reg_soundname);  
  14.                        var arr_singer = l.match(reg_singer);  
  15.                        var arr_CD= l.match(reg_CD);  
  16.                        var arr_maker = l.match(reg_maker);  
  17.                          
  18.                        
  19.                        var info= " ";  
  20.                        if (arr_soundname != null)  
  21.                        {  
  22.                                info += ":" + arr_soundname[1] + "  ";  
  23.                        }  
  24.                        if (arr_singer != null)  
  25.                        {  
  26.                                info += ":" + arr_singer[1] + "  ";  
  27.                        }  
  28.                        if (arr_CD != null)  
  29.                        {  
  30.                                info += ":" + arr_CD[1] + "  ";  
  31.                        }  
  32.                        if (arr_maker != null)  
  33.                        {  
  34.                                info += arr_maker[1] + "  ";  
  35.                        }                          
  36.                          
  37.                          
  38.                        var reg_take =/\[\d\d:\d\d\.\d\d\]*(\s)*(\S)+/g; //  
  39.                       
  40.                        var arr_lyrics = l.match(reg_take);                          
  41.                        
  42.                        var reg_replacetime =/(\[\d\d:\d\d\.\d\d\])+/g;  
  43.                        
  44.                        var reg_gettimes =/(\[\d\d:\d\d\.\d\d\])/g;  
  45.                        var reg_readtime =/\[(\d\d):(\d\d\.\d\d)\]/;  
  46.                        
  47.                        var reg_dis =/ $/;  
  48.                          
  49.                          
  50.                        var arr_splitedLyrics = new Array();  
  51.                          
  52.                         
  53.                        var arr_info = [0, info];  
  54.                        arr_splitedLyrics.push(arr_info);  
  55.                      for ( ly= 0; ly < arr_lyrics.length; ly++)  
  56.                         {  
  57.                               
  58.                               var arr_tmptime= arr_lyrics[ly].match(reg_gettimes);  
  59.   
  60.                             // alert("arr_lyrics[ly]="+arr_lyrics[ly]);  
  61.                                // alert("arr_tmptime="+arr_tmptime);  
  62.                               var  lyy =  arr_lyrics[ly].replace(reg_replacetime, "");  
  63.                              
  64.                                for ( i= 0; i < arr_tmptime.length; i++)  
  65.                                {  
  66.                                        
  67.                                        var arr_single= new Array();  
  68.                                        
  69.                                        var t = arr_tmptime[i];  
  70.                                     // alert("t="+t);  
  71.                                        var min = t.substring(1,3);  
  72.                                       
  73.                                        var sec =  t.substring(4,t.length-1);  
  74.                                     //alert("sec="+sec);  
  75.                                        var time = Number(min) * 60 + Number(sec);  
  76.                                       // alert("time="+time);  
  77.                                        arr_single[0] = time;  
  78.                                        
  79.                                       // if (!reg_dis.test(lyy))  
  80.                                       // {  
  81.                                       //         lyy += " ";  
  82.                                       // }  
  83.                                        arr_single[1] = lyy;  
  84.                                         
  85.                                        arr_splitedLyrics.push(arr_single);  
  86.                                }  
  87.   
  88.   
  89.                             arr_splitedLyrics.sort(function(a, b){  
  90.        return a[0]-b[0];  
  91.    }  
  92. ;  
  93.                         }  
  94.                            
  95.   
  96.                        return arr_splitedLyrics;     
  97.  }  





html代码

Java代码  收藏代码
  1. <script type="text/javascript" src="tt.js"></script>  
  2. <script type="text/javascript" src="jquery-latest.js"></script>  
  3. <script type="text/javascript" src="uft8.js"></script>  
  4.   
  5.   
  6. <div align="center">  
  7.   
  8.  <object classid = "clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6"  id="player" width = "250" height = "200">   
  9.    <param name = "url" value = "冰雨.mp3" target="_blank" >参数 url 定义播放媒体的路径。   
  10.    <!--是否自动播放-->   
  11.    <param NAME="Balance" VALUE="0"> <SCRIPT LANGUAGE="JavaScript">  
  12.    </SCRIPT>  
  13.    <!--调整左右声道平衡,同上面旧播放器代码-->   
  14.    <param name="enabled" value="-1">   
  15.    <!--播放器是否可人为控制-->   
  16.    <param NAME="EnableContextMenu" VALUE="-1">   
  17.   <param name="defaultFrame" value="2">   
  18.   <PARAM NAME="AutoStart" value="-1">  
  19.   <param name="SAMIFilename" value="ll">   
  20.   <param name="ShowStatusBar" value="0">  
  21.   
  22.   
  23. </object>   
  24.   
  25.   
  26.   
  27. </div>  
  28.     <div>  
  29.          <a href="#" id="next" >下一首歌</a>  
  30.          <a href="#" id="p">上一首歌</a>  
  31.          <input type="checkbox" id="ck">循环播放  
  32.         时间 <input type="text" id="playerinfo">  
  33.     </div>  
  34.     
  35.      
  36.    <!--显示歌词-->   
  37.    <div id="geci">  
  38.           
  39.     </div>  
  40. <a href="#" id="showLs" >查看歌曲</a>  
  41. <div>  
  42.     <select name="select1" size="5" id="s" >  
  43.         <option value="1" selected > 朋友</option>  
  44.         <option value="2"  > 你好吗</option>  
  45.     </select>  
  46.  </div>  
  47.   
  48. <div id="lcdiv">  
  49. <select name="ly" size="10" id="lc">        
  50.     </select>  
  51. </div>  
  52.   
  53.    
  54. <script type="text/javascript">  
  55.   player.closedCaption.SAMIFileName = "C:\\3.smi";  
  56.   var num=0;//控制歌曲的下标  
  57. </SCRIPT>  
  58. //监听播放器的事件  
  59. <SCRIPT  event="playStateChange(star)" for="player"  LANGUAGE="JScript">  
  60.  //当播放下一首时同步播放列表的歌曲名  
  61.   
  62.   
  63.     if( star==8 ){   
  64.       
  65.         num=num+1;  
  66.   
  67.      if(num>=s.options.length){num=0}  
  68.      s.options[num].selected=true;  
  69.     }  
  70.   
  71.   
  72.   
  73. </SCRIPT>  
  74.   
  75.   
  76. <SCRIPT FOR = player EVENT = buffering(Start)>  
  77.    
  78.  if(Start==false){ setInterval(updatetime() ,1000);}  
  79.   
  80. </SCRIPT>  
  81.   
  82.   
  83.   
  84.   
  85.   
  86.  <script type="text/javascript">  
  87.   
  88. //显示播放时间  
  89. setInterval(updatetime,1000);  
  90.     function updatetime()  
  91. {  
  92.     $("#playerinfo").val( player.controls.currentPositionString + " | " + player.currentMedia.durationString);  
  93. }   
  94.   
  95.    
  96.   
  97.   
  98.    
  99. //监听循环的次数  
  100. $("#ck").click(function (){  
  101.      
  102.   if(ck.checked==true){  
  103.    player.settings.setMode("loop",true)  
  104.   
  105.   }else{  
  106.   
  107.     player.settings.setMode("loop",false)  
  108.   }  
  109.   
  110. });  
  111. //播放用户从播放列表中选中的歌曲  
  112.  $("#s").click(function (){  
  113.   
  114.   
  115.     num=this.selectedIndex;  
  116.     player.controls.playItem(player.currentPlaylist.item(num));  
  117.   
  118. });  
  119.   
  120. //播放下一首歌  
  121.  $("#next").click( function (){  
  122.     
  123.     player.controls.next();   
  124.     num=num+1;  
  125.     if(num>=s.options.length){num=0;  
  126.      player.controls.playItem(player.currentPlaylist.item(num));  
  127.     }  
  128.     s.options[num].selected=true;  
  129.   
  130.     
  131.  });  
  132.   
  133.  //播放上一首歌  
  134.  $("#p").click( function (){  
  135.   num=num-1;  
  136.   if(num<0){  
  137.   num=s.options.length-1;  
  138.   player.controls.playItem(player.currentPlaylist.item(num));  
  139.    
  140.  }    
  141.  s.options[num].selected=true;  
  142.    
  143.  });   
  144.   
  145. //生成歌词的数组(从隐藏域中提取歌词的字符串)  
  146. $("#geci").hide();  
  147. $("#lcdiv").hide();  
  148. var ly="";  
  149. var arr_lyrics;  
  150. var j=0;  
  151. $("#showLs").click(function (){  
  152.   var  html = $.ajax({  
  153.     url:"http://localhost:8080/music/lyrics.html",  
  154.     async: false     
  155.      }).responseText;  
  156.   
  157. $("#geci").html(html);  
  158.  arr_lyrics=get($("#geci").html());  
  159. for( i=0;i<arr_lyrics.length;i++){  
  160.  ly+="<option >"+arr_lyrics[i][1]+"</option>";  
  161.   
  162.   
  163. }  
  164. ly=ly.substring(2,ly.length);  
  165.   
  166. $("#lc").html(ly);  
  167.   
  168. $("#lc").attr({size:arr_lyrics.length});  
  169.   
  170. $("#lcdiv").show("slow");  
  171. setInterval(playLyrics,3000);  
  172.    
  173.   
  174. });  
  175.   
  176.   
  177.   
  178.   
  179. //歌词与歌曲的同步  
  180.   
  181.   
  182.   
  183. function playLyrics (){  
  184.           var playTime= player.controls.currentPositionString;  
  185.           
  186.          var min =playTime.substring(0,2);  
  187.           
  188.          var sec = playTime.substring(3,playTime.length);  
  189.           
  190.          var p_time  = Number(min) * 60 + Number(sec);  
  191.           
  192.           
  193.     for(i=0;i<lc.options.size-1;i++ ){  
  194.               
  195.   
  196.           if( p_time>= arr_lyrics[i][0]&&p_time<arr_lyrics[i+1][0]){  
  197.               j=i;    
  198.   
  199.         
  200.              break;  
  201.     
  202.           }  
  203.   
  204.     }  
  205.       
  206.     lc.options[j].selected=true;  
  207.     alert(parseInt(lc.style.top)-1);  
  208.   
  209. };  
  210.   
  211.   
  212.   
  213.   
  214.  </script>  



lyrics.html

Java代码  收藏代码
  1. <meta http-equiv="content-type" content="text/html; charset=utf-8">  
  2.   
  3. <body>  
  4. [ti:让我忘了你]  
  5. [ar:沈世爱]  
  6. [al:半杯苦咖啡]  
  7. [by:bzmtv.com]  
  8.   
  9. [03:53.24][01:53.08][00:01.60]沈世爱 - 让我忘了你  
  10. [03:58.98][01:59.16][00:09.85]www.50004.com   
  11. [02:35.66][00:39.31]  
  12. [02:37.23][00:40.27]当我想忘记你 紧紧闭上双眼   
  13. [02:42.96][00:46.02]想着一定会有人代替你的容颜  
  14. [02:48.88][00:51.91]我不会再想念 慢慢睁开双眼  
  15. [02:54.68][00:57.77]泪水已经模糊了我的视线  
  16. [03:00.27][01:03.24]在我忘记你之前 仿佛看见你的脸   
  17. [03:06.12][01:09.48]轰轰烈烈的故事 平淡无奇的结局  
  18. [03:11.96][01:15.14]我不想再有期盼 你给我一点光芒  
  19. [03:18.12][01:21.15]游荡在整个城市的两端   
  20. [03:23.66][01:26.80]在夜深人静的时侯 看着窗外的月光   
  21. [03:29.47][01:32.51]莫名的孤独和寂寞 映在回忆的路上   
  22. [03:35.34][01:38.39]你已经渐渐的离去 消失了像风一样   
  23. [03:41.19][01:44.20]每次当我走得累了 幻想着有你在身旁  
  24. [03:51.88][01:51.86]  
  25.   
  26. </body>  



播放列表的代码


Java代码  收藏代码
  1. <SCRIPT language="JavaScript" type="text/JavaScript" >  
  2.   
  3. //生成播放列表playList  
  4.     var playlist= player.playlistCollection.newPlaylist("New");  
  5. //生成播放项    
  6.   var  m = player.newMedia("1.mp3");  
  7. //添加歌曲到播放列表   
  8.      playlist.appendItem(m);  
  9.  //设置当前的播放器播放的歌曲列表      
  10.     player.currentPlaylist = playlist;  
  11.   
  12. </SCRIPT>  
返回顶楼
         
  • java007008
  • 等级: 初级会员
  • 性别:
  • 文章: 6
  • 积分: 30
  • 来自: 广州
   发表时间：2014-01-10  
没有说明？不认真
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics