可視化音軌

//音樂播放器模塊、
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();
    },
    // 時間
    time : function(callback) {
        var $this = this;
        this.audioDom.addEventListener("canplaythrough", function() {
            var totaltime = $this.format(this.duration);
            // $(".time").html($this.format(this.duration));
            // 這種寫法耦合度較高，只適用於當前頁面，沒法進行擴展，能夠用回調函數，將獲得的時間回調出去
            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);
        });
    },
    // 格式化時間
    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;
    },
    // 進度
    percent : function() {

    }
};

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

        var domBox = dom("wrapBox");
        var bwidth = domBox.clientWidth; // 相同狀況下，clientWidth<offsetWidth
                                            // ,clientWidth不包括邊框。只包括內邊距
        var ms = Math.floor(bwidth / this.mw); // 盒子的數量
        // var html="";
        domBox.style.width = (ms + 1) * this.mw + "px";
        for (var i = 0; i <= ms; i++) {
            // html+="<span class='items'
            // style='left:"+(i*this.mw)+"px;background-color:"+randomColor(0.5)+"'></span>";
            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;
        /* 動畫執行的兼容寫法 */
        window.requestAnimationFrame = window.requestAnimationFrame
                || window.webkitRequestAnimationFrame
                || window.mozRequestAnimationFrame
                || window.msRequestAnimationFrame;
        // 2:初始化音軌對象
        var audioContext = new window.AudioContext();
        return audioContext;
    },

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

        }
    },

    data : function(analyser, callback) {
        if (KeKeMusic.mark) {
            // 將音頻轉換一個數組
            var array = new Uint8Array(analyser.frequencyBinCount);
            analyser.getByteFrequencyData(array);
            // 經過回調函數返回
            if (callback)
                callback(array);
            requestAnimationFrame(function() {
                KeKeMusic.data(analyser, callback);
            });
        }
    }
};

window.onload = function() {
    cxBar.init();
    // 點擊音樂播放器
    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;
//    }

};