摘要：音樂播放器模塊初始化播放暫停時(shí)間這種寫法耦合度較高，只適用于當(dāng)前頁(yè)面，無法進(jìn)行擴(kuò)展，可以用回調(diào)函數(shù)，將得到的時(shí)間回調(diào)出去格式化時(shí)間進(jìn)度定義一個(gè)存放對(duì)象的數(shù)組每一個(gè)盒子寬度相同情況下，不包括邊框。

//音樂播放器模塊、
var cxMusic = {
    audioDom : null,
    // 初始化
    init : function(callback) {
        this.audioDom = document.getElementById("audioDom");
        this.time(callback);
    },
    // 播放
    play : function() {
        return this.audioDom.play();
    },
    // 暫停
    stop : function() {
        return this.audioDom.pause();
    },
    // 時(shí)間
    time : function(callback) {
        var $this = this;
        this.audioDom.addEventListener("canplaythrough", function() {
            var totaltime = $this.format(this.duration);
            // $(".time").html($this.format(this.duration));
            // 這種寫法耦合度較高，只適用于當(dāng)前頁(yè)面，無法進(jìn)行擴(kuò)展，可以用回調(diào)函數(shù)，將得到的時(shí)間回調(diào)出去
            if (callback)
                callback.call(this, true, totaltime);
        });
        this.audioDom.addEventListener("timeupdate", function() {
            var current = $this.format(this.currentTime);
            var percent = this.currentTime / this.duration * 100;
            if (callback)
                callback.call(this, false, current, percent);
        });
    },
    // 格式化時(shí)間
    format : function(ftime) {
        var m = Math.floor(ftime / 60);
        var s = Math.floor(ftime % 60);
        if (m < 10)
            m = "0" + m;
        if (s < 10)
            s = "0" + s;
        return m + ":" + s;
    },
    // 進(jìn)度
    percent : function() {

    }
};

var cxBar = {
    arr : [],// 定義一個(gè)存放span對(duì)象的數(shù)組
    mw : 5,// 每一個(gè)盒子寬度
    init : function() {

        var domBox = dom("wrapBox");
        var bwidth = domBox.clientWidth; // 相同情況下，clientWidth";
            var spanDom = document.createElement("span");
            spanDom["className"] = "items";

            // css(spanDom,{left:(i*this.mw)+"px",backgroundColor:randomColor(0.5)});
            css(spanDom, {
                left : (i * this.mw),
                width : this.mw - 1,
                //backgroundColor : randomColor(0.5)
            });
            domBox.appendChild(spanDom);
            cxBar.arr.push(spanDom);
        }
        // domBox.innerHTML=html;

    }
};

/* 音樂解析器 */
var KeKeMusic = {
    mark : false,

    init : function() {// ie11以上的瀏覽器才支持
        // 1:音頻上下文===html5+ajax+audioContext html5+audio+audioContext
        window.AudioContext = window.AudioContext || window.webkitAudioContext
                || window.mozAudioContext || window.msAudioContext;
        /* 動(dòng)畫執(zhí)行的兼容寫法 */
        window.requestAnimationFrame = window.requestAnimationFrame
                || window.webkitRequestAnimationFrame
                || window.mozRequestAnimationFrame
                || window.msRequestAnimationFrame;
        // 2:初始化音軌對(duì)象
        var audioContext = new window.AudioContext();
        return audioContext;
    },

    parse : function(audioContext, audioDom, callback) {
        try {
            // 拿到播放器去解析你音樂文件
            var audioBufferSouceNode = audioContext
                    .createMediaElementSource(audioDom);
            // 創(chuàng)建解析對(duì)象
            var analyser = audioContext.createAnalyser();
            // 將source與分析器連接
            audioBufferSouceNode.connect(analyser);
            // 將分析器與destination連接，這樣才能形成到達(dá)揚(yáng)聲器的通路
            analyser.connect(audioContext.destination);
            // 調(diào)用解析音頻的方法
            KeKeMusic.data(analyser, callback);
        } catch (e) {

        }
    },

    data : function(analyser, callback) {
        if (KeKeMusic.mark) {
            // 將音頻轉(zhuǎn)換一個(gè)數(shù)組
            var array = new Uint8Array(analyser.frequencyBinCount);
            analyser.getByteFrequencyData(array);
            // 通過回調(diào)函數(shù)返回
            if (callback)
                callback(array);
            requestAnimationFrame(function() {
                KeKeMusic.data(analyser, callback);
            });
        }
    }
};

window.onload = function() {
    cxBar.init();
    // 點(diǎn)擊音樂播放器
    var audioDom = dom("audioDom");
    var audioContext = KeKeMusic.init();
    this.audioDom.onplay = function() {
        KeKeMusic.mark = true;
        var len = cxBar.arr.length;
        KeKeMusic.parse(audioContext, audioDom, function(data) {
            for (var i = 0; i < len; i++) {
                cxBar.arr[i]["style"]["height"] = data[i] + "px";
                cxBar.arr[i].style.background = "linear-gradient("+randomColor(0.5)+"5%,rgba(255,255,0,0.5) 60%,#fff 100%)";
            }
        })
    };
//    this.audioAutom.onpause=function(){
//        kekeMusic.mark=false;
//    }

};