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("
");
    
    //正则表达式
    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 ;
    }
    //1
    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 ***************************/