canvas 視訊音樂播放器

var play_nor_img_path = 'images/play_btn_n.png'; //播放按鈕 正常時   60x60 px
var play_sec_img_path = "images/play_btn_s.png";//播放按鈕 選中時
var play_clc_img_path = "images/play_btn_c.png";//播放按鈕 單擊時
var pause_nor_img_path = 'images/pause_btn_n.png';//暫停按鈕 正常時
var pause_sec_img_path = "images/pause_btn_s.png";//暫停按鈕 選中時
var pause_clc_img_path = "images/pause_btn_c.png";//暫停按鈕 單擊時
var main_bg = "images/main_UI_bg.png";  //背景圖 1920x930 px;
var logo ="images/logo.webm";
var logop;
var pause_icon;
var songTime;
var nowSongTime;
var lunt_update = false;

function player(path=""){
    window.audio=[]; 
    var mobj;
    var isMovie = getFiletype(path);
    window.audio.isMovie = isMovie;
    //獲取物件LEFT 總寬度
    function getpos(e){
        var obj = e;
        var left = obj.offsetLeft;
        while(obj = obj.offsetParent){
            left+= obj.offsetLeft;
        }
        return left;
    }
    
    
    if(isMovie == false){ //是否視訊  可以改為自動判斷拓展名 
        mobj = new Audio(path); 
        logop = document.createElement("video");
        document.body.appendChild(logop);
        logop.style.display="none";
        logop.src=logo;
        logop.play();
        window.setInterval(function(){
            if(logop.ended == true){
                logop.play();
            }
        },100);
        
    }else{
        var mobj_style="display:none;"
        mobj = document.createElement("video");
        document.body.appendChild(mobj);
        mobj.setAttribute("style",mobj_style);
        mobj.src=path;
        
    }
    audio.id=mobj;
    setWindow();
    var count = 0;
    var inc_lunt=document.getElementById("inc_lunt");
    var main_lunt = document.getElementById("main_lunt");
    mobj.play();
        // 設定播放按鈕
        if(mobj.ended == true || mobj.paused == true){
            play_icon.style.background="url('"+play_nor_img_path+"')"
        } else {
            play_icon.style.background="url('"+pause_nor_img_path+"')"
        }
    //獲取目標引數
    ;
    //手動設定播放進度
    main_lunt.onclick = function (e=window.event){ //取得單位位置所處時間 乘以 滑鼠所在相對於進度條的位置
        console.info(e.clientX+","+e.clientY+":"+getInc_pos(songTime,700,e.clientX - getpos(inc_lunt)));
        inc_lunt.style.width = (e.clientX - inc_lunt.offsetLeft)+"px";
        mobj.currentTime =getInc_pos(songTime,700,e.clientX - getpos(inc_lunt));
    }
    
    
    
    
    mobj.addEventListener("play",function (){
        start_update_lunt()
        //迴圈繪製視訊
        var t3 = window.setInterval(function (){
            if(mobj.ended == true || mobj.paused == true){ //播放停止時移除計時器
                clearInterval(t3);
            }else{
                try{
                    if(window.audio.isMovie == false){
                        window.audio.rect.drawImage(logop,0,0,900,490); //繪製一幀
                    }else {
                        window.audio.rect.drawImage(mobj,0,0,900,490); //繪製一幀
                    }
                    
                }catch(e){
                    console.error(e.message);//報錯 
                }
            }
                
                
            },100);
        },false);
    //player 程式碼結束
}
function setWindow(){
    //設定視窗 及UI
    var musicWinObj = document.getElementsByClassName("music_win")[0];
    var nodeValue="";
    nodeValue += "position: absolute;";
    nodeValue += "width: 900px;";
    nodeValue += "height:550px;";
    nodeValue += "margin-top: -275px;";
    nodeValue += "margin-left: -450px;";
    nodeValue += "left: 50%;";
    nodeValue += "top:50%;";
    nodeValue += "background:#C3C3C3; z-index:1";
    nodeValue += "";
    musicWinObj.setAttribute("style",nodeValue);
    var h_data='';
    h_data += '<div style="position: absolute; width: 900px;height: 60px; background: #F0F0F0;bottom: 0px; margin-left: -450px; left:50%;">';
    h_data += '<div style="position: absolute; width: 120px; height: 60px; margin-top: -30px;  top:50%;">';
    h_data += '<div id="play_icon" style=" position: absolute; width: 60px; height: 60px;margin-left: -30px;left:50%; margin-top: -30px;  top:50%;"></div><!--播放按鈕-->';
    h_data += '</div><!--播放按鈕層 -->';
    h_data += '<div id="main_lunt" style="width: 700px;height: 10px; border: #000000 1px solid; margin-left: -350px; left:55%;position: absolute; margin-top: -5px; top:50%;">';
    h_data += '<div id="inc_lunt" style="height: 10px; background: #000000;left:0%;position: absolute; margin-top: -5px; top:50%;"></div><!--動態進度條-->';
    h_data += '</div><div style="border-radius:90deg;"></div><!--進度條-->';
    h_data += '</div>';   
    musicWinObj.innerHTML=h_data;
    
    //建立視訊繪畫區
    var vid_win = document.createElement("canvas");
    var vid_win_style = "width: 900px; height: 490px; position:relative;  margin-left: -450px; top: 0px; left: 50%; background: #000000;";
    vid_win.setAttribute("style",vid_win_style);
    vid_win.style.display="block";
    musicWinObj.appendChild(vid_win);
    vid_win.width="900";
    vid_win.height="490";
    window.audio.rect = vid_win.getContext("2d"); //取得繪圖上下文
    
    //設定播放按鈕
    play_icon = document.getElementById("play_icon");
    play_icon.style.background="url('"+play_nor_img_path+"')"
    var main_bg_style = '';
    main_bg_style +='position:absolute; width:1920px; height:960px; margin-left:-960px; left:50%; margin-top:-480px; top:50%; z-index:0';
    
    //建立背景區
    var main_bg_win = document.createElement("div");
    document.body.appendChild(main_bg_win); 
    main_bg_win.setAttribute("style",main_bg_style);
    main_bg_win.style.background="url('"+main_bg+"')";

    
    vid_win.ondblclick =function (){  //雙擊繪圖層 canvas 最大化
        if(main_bg_win.style.display != "none" ){
            main_bg_win.style.display = "none";
            var full_scr_style = "width: 1920px; height: 960px; position:absolute;  margin-left: -960px; margin-top: -475px; top: 50%; left: 50%; background: #000000; display:block;z-index:20";
            vid_win.setAttribute("style",full_scr_style);
        }else{
            main_bg_win.style.display = "block";
            vid_win.setAttribute("style",vid_win_style);
            
            
        }
        
    }
    
    //事件繫結   移入移出事件
    play_icon.onmousemove=function (){
        if(audio.id.ended == true || audio.id.paused == true){
            play_icon.style.background="url('"+play_sec_img_path+"')"
        } else {
            play_icon.style.background="url('"+pause_sec_img_path+"')"
        }
    }
    play_icon.onmouseover=function (){
        if(audio.id.ended == true || audio.id.paused == true){
            play_icon.style.background="url('"+play_sec_img_path+"')"
        } else {
            play_icon.style.background="url('"+pause_sec_img_path+"')"
        }
    }
    play_icon.onmouseout=function (){
        if(audio.id.ended == true || audio.id.paused == true){
            play_icon.style.background="url('"+play_nor_img_path+"')"
        } else {
            play_icon.style.background="url('"+pause_nor_img_path+"')"
        }
        
    }
    
    //播放暫停及圖示設定
    play_icon.onmousedown=function(){  
        if(audio.id.ended == true || audio.id.paused == true){
            play_icon.style.background="url('"+play_clc_img_path+"')"
            audio.id.play();
            start_update_lunt();
        } else {
            play_icon.style.background="url('"+pause_clc_img_path+"')"
            audio.id.pause();
        }
    }
    play_icon.onmouseup=function(){
        if(audio.id.ended == true || audio.id.paused == true){
            play_icon.style.background="url('"+play_nor_img_path+"')"
        } else {
            play_icon.style.background="url('"+pause_nor_img_path+"')"
        }
    }
        
        
}
function getInc_pos(maxnum,max_t,pos){ //進度條比例計算
    return pos*(maxnum/max_t);
}

function getInc_pos_f(maxnum,max_t,pin){ //沒有用的 函式
    return pin*(max_t/maxnum);
}
function start_update_lunt(){
    if(lunt_update == false){
        lunt_update = true;
        var t = setInterval(function(timeV=t){
            songTime = window.audio.id.duration;
            nowSongTime = window.audio.id.currentTime;
            inc_lunt.style.width = getInc_pos(100,songTime,nowSongTime)+"%"; //設定進度條
            if(window.audio.id.ended == true){
                lunt_update = false;
                console.error("end!");
                clearInterval(t);//停止時移除定時器
            }       
        },100)
    }
}

function getFiletype(str_path){
    /*
    var end5 = str_path.substr(str_path.length-6,str_path.length);
    console.info(end5);
    var pos = end5.indexOf(".");
    console.info(pos);
    var end5len = end5.length;
    console.info(end5len);
    var type = end5.substr(pos,end5len-1);
    console.info(type);
    */
    var pos = str_path.indexOf(".");
    var str_path_len = str_path.length;
    var type = str_path.substr(pos,str_path_len-1);
    console.log(type);
    var video = new Array(10);
    var music = new Array(10);
    video = ["mp4","avi","3gp","webm","mkv","mpg","wmv","vob","flv"];
    music = ["mp3","wav","ogg","m4a","amr","m4r","acc","wave","flac"];
    for(var i =0;i<10;i++){
        if(type == "."+video[i]){
            return true;
        }
        if(type == "."+music[i]){
            return false;
        }
    }
    return false;
}