HTML5 javascript实现音乐播放器

准备毕业了，感觉好多东西都没学会，太多太多想学的知识，有种求知若渴的状态。

四年的大学就剩下一个多月了，无论将来多么困难，这条路是自己选的，走就要走的精彩！

自学了一点javascript、php，做了一个web app，我将其取名为Youlike随心听，就如我的信念一样，自己的人生自己掌控，做自己喜欢的事情，自由的生活！

使用javascript实现音乐播放操作，实现歌词解析，并动态放映歌词效果。

 $(function(){
     //初始化测试
     //alert();
     //开启歌词动态监听
     scrollBar();
     //播放结束后监听
     Player().addEventListener('ended', function () {
         //alert('over');
         nextMusic();
     });
     $("#play").bind("click", function() {
         // current_lyric = data.next_mid;
         if(Player().paused){

             //修改按钮图标
             //$("#play").attr("src","../images/on_play_but.png");
             $("#play").removeClass("play");
             $("#play").addClass("onplay");

             if(Player().src == ""){
                 //获取歌曲文本信息
                 playMusic();
             }else{
                 Player().play();
             }
             //playMusic();
             //Player()
         }else{

             $("#play").removeClass("onplay");
             $("#play").addClass("play");
             Player().pause();
         }
     });

     $("#next").bind("click",function(){
         nextMusic();
     });
     $("#back").bind("click",function(){
         //nextMusic();
         if(play_history_position == 0){
             return ;
         }
     });

     $("#play").removeClass("play");
     $("#play").addClass("onplay");
     playMusic();
     //////////////非播放器脚本///////////////
     $(".nav ul li").bind("click",function(){
         location.href=$(this).find("a").attr("href");
     });

 });
 //var 全局
 var played = 0;
 var play_history_list = [];
 var play_history_position = 0;

 //获取播放器audio对象
 function Player(){
     var player = document.getElementById("MyPlayer");
     return player;
 }
 /**************************** 音乐播放控制 start ****************************/
 function nextMusic(){

     $.post(root_url + "/index.php/Home/Index/find_music",{channel:current_play_music_channel},function(data){
         //更改当前曲目标识符
         //alert("");
         current_play_music_mid = data.mid;
         //加载歌词前进行清空
         lyric_time = [];
         lyric_text = [];
         lyric_flag = 0;
         loadLyric();
         //设置曲目信息
         $("#channel_name").html(current_play_music_channel);
         //专辑
         //$("#album_image").attr("src",""+ root_url+"/download.php?type=image&mid="+data.mid +"");
         var album_canvas = document.getElementById("album_canvas");
         var context = album_canvas.getContext("2d");
         var image = new Image();
         image.src = ""+ root_url+"/download.php?type=image&mid="+data.mid +"";
         //image.src = public_url+"/images/205798.jpg";
         image.onload = function(){
             context.drawImage(image,0,0,300,150);
         }

         //曲目名称
         $("#music_name").html("《"+data.real_name+"》");
         //演唱者
         $("#music_singer").html(data.singer);
         Player().src = root_url+"/download.php?type=music&mid="+data.mid;
         //播放状态
         Player().play();
         //alert(data);
     },"json");
 }
 function playMusic(){
     //alert(current_play_music_channel);
     if(current_play_music_channel == null || current_play_music_channel == ""){
         current_play_music_channel = "随便听听";
     }
     if(played == 0){
         mPlay();
         played = 1;
     }
     if (Player().src == "") {
         $.post(root_url + "/index.php/Home/Index/find_music",{channel:current_play_music_channel},function(data){
             //更改当前曲目标识符
             //alert("");
             current_play_music_mid = data.mid;
             //加载歌词前进行清空
             lyric_time = [];
             lyric_text = [];
             lyric_flag = 0;
             loadLyric();
             //设置曲目信息
             $("#channel_name").html(current_play_music_channel);
             //专辑
             //$("#album_image").attr("src",""+ root_url+"/download.php?type=image&mid="+data.mid +"");
             var album_canvas = document.getElementById("album_canvas");
             var context = album_canvas.getContext("2d");
             var image = new Image();
             //image.src = ""+ root_url+"/download.php?type=image&mid="+data.mid +"";
             image.src = public_url+"/images/205798.jpg";
             //context.drawImage(image,0,0);
             image.onload = function(){
                 context.drawImage(image,0,0,300,150);
             }
             //曲目名称
             $("#music_name").html("《"+data.real_name+"》");
             //演唱者
             $("#music_singer").html(data.singer);
             Player().src = root_url+"/download.php?type=music&mid="+data.mid;
             //播放状态
             Player().addEventListener("canplay", function(){
                 Player().play();
             });
             /*Player().play();*/
             //alert(data);
         },"json");

     }else{
         Player().pause();
     }
 }

 /**************************** 音乐播放控制 end ****************************/

 /**************************** 歌词动态效果实现 start *****************************/
 //歌词播放进度标识
 var scrollh = 0;

 //每行的高度20px;
 function display_lyric(time){

     //清空容器
     /*if(){

     }*/
     $("#lyric_div").html("");
     //歌词有两种状态
     //1.播放过程中，歌词不在最后一行
     //2.播放过程中，歌词到最后一行
     if(time < lyric_time[lyric_time.length-1]){
         for(var k=0 ; k<lyric_text.length ; k++){
             if(lyric_time[k] <= time && time < lyric_time[k+1]){
                 scrollh = k*22;
                 $("#lyric_div").html($("#lyric_div").html() + "<font style='color:#eae211;font-size:22px;'>" + lyric_text[k] + "<font><br/>");
             }else{
                 $("#lyric_div").html($("#lyric_div").html() + lyric_text[k] + "<br/>");
             }
         }
     }else{
         for(var j=0 ; j<lyric_text.length-1 ; j++)
             $("#lyric_div").html($("#lyric_div").html() + lyric_text[j] + "<br/>");
         $("#lyric_div").html($("#lyric_div").html() + "<font style='color:red;'>" + lyric_text[lyric_text.length-1] + "<font><br/>");
     }

 }
 //根据歌词进度，，动态自动滚动行号
 function scrollBar()//设置滚动条的滚动
 {
     //判断进度
     if(document.getElementById("lyric_div").scrollTop<=scrollh-50)
         //调整行号
         document.getElementById("lyric_div").scrollTop+=1;
     if(document.getElementById("lyric_div").scrollTop>=scrollh+50)
         document.getElementById("lyric_div").scrollTop-=1;
     //调整跨度
     window.setTimeout("scrollBar()",50);
 }

 function mPlay()//开始播放
 {
     var ms_100 = parseInt(getSeconds());
     if (isNaN(ms_100))
         display_lyric(0);
     else
         display_lyric(ms_100);
     window.setTimeout("mPlay()", 100)
 }
 function getSeconds()//得到当前播放器播放位置的时间
 {
     var t = Player().currentTime;
     var s = parseFloat(t) * 100.0;
     return parseInt(s);
 }
 /**************************** 歌词动态效果实现 end *****************************/

 /***************************歌词解析   start  ***************************/
 var lyric_time = [];    //保存歌词的时间整数 100ms级；
 var lyric_text = [];    //保存对应上述时间的歌词文本信息；
 var lyric_flag = 0;  //歌词保存位置标识

 //ajax访问获取歌词
 //url :
 //参数  : mid
 //响应函数 :
 function loadLyric(){
     $.post(root_url+"/download.php",{type:"lyric",mid:current_play_music_mid},function(data){
         //alert(data);
         parseLyric(data);
     },"text");
     /*alert($.ajax({
          url: "__ROOT__/download.php",
          async: false
     }).responseText);*/
 }

 //歌词分解
 function parseLyric(lyric_string){
     //alert(lyric_string);
     //按行进行划分
     var row_string = lyric_string.split("\n");

     //正则表达式
     var regular_context_start = /^.\d.+/;

     //歌词内容开始下标
     var lyric_context_index = 0;

     //遍历寻找歌词内容开始部分
     for(var i=0 ; i<row_string.length ; i++){
         if(regular_context_start.test(row_string[i])){  //匹配成功
             lyric_context_index = i;
             break;
         }
     }
     //alert("0");
     //歌词数据转换并存入数组
     for(var k=lyric_context_index ; k<row_string.length ; k++){
         textFormat(row_string[k]);
     }
     //alert("1");
     //歌词内容数组排序
     sortLyricArray();
     //alert("2");
     //将歌词渲染到容器内
     var lyric_list_string = "";
     for(var n=0 ; n<lyric_flag; n++){
         lyric_list_string = lyric_list_string + lyric_text[n] + "<br/>";
     }
     $("#lyric_div").html(lyric_list_string);
 }

 //歌词数据转换类
 //[00:12.64]我有必要相信地球也能是个可爱迪士尼
 //1.判断时间标识符个数N
 //2.时间转换 [00:12.64] => 1264
 //3.歌词内容部分写入
 function textFormat(text){
     //0 验证
     if(text == null || text == ""){
         return ;
     }
     //
     var char_number = 0;
     for(var i=0 ; i<text.length ;i++){
         if(text.charAt(i) == '['){  //统计
             char_number++;
         }
     }
     if(char_number == 0){ //检测
         return ;
     }
     //alert(char_number);
     for(var k=0 ; k<char_number ; k++){

         var lyric_tmp_time= parseTime(text.substring(k*10+1,k*10+9));

         lyric_text[lyric_flag] = text.substring((char_number)*10);
         lyric_time[lyric_flag] = lyric_tmp_time;
         lyric_flag++;
     }
 }

 //时间格式化 01:12.45 => 1*60*100+12*100+45;
 function parseTime(time_string){
     var m = time_string.substring(0,time_string.indexOf(":"));
     var s = time_string.substring(time_string.indexOf(":") + 1);
     var total_time = parseInt(parseInt(m) * 60 *100 + parseFloat(s) * 100.0);
     //检测
     if(isNaN(total_time)){
         total_time = 0;
     }
     return total_time;
 }

 //数组排序（根据时间）
 function sortLyricArray(){
     //选择排序 lyric_time[]
     for(var i=0 ; i<lyric_time.length-1 ; i++){
         var min = i;
         for(var j=i ; j<lyric_time.length ; j++){
             if(lyric_time[min] > lyric_time[j]){
                 min = j;
             }
         }
         //数据交换
         var tmp_time = lyric_time[i];
         var tmp_text = lyric_text[i];
         lyric_time[i] = lyric_time[min];
         lyric_time[min] = tmp_time;
         lyric_text[i] = lyric_text[i];
         lyric_text[min] = tmp_text;
     }
 }
 /***************************歌词解析   end ***************************/