可视化音轨

摘要：音乐播放器模块初始化播放暂停时间这种写法耦合度较高，只适用于当前页面，无法进行扩展，可以用回调函数，将得到的时间回调出去格式化时间进度定义一个存放对象的数组每一个盒子宽度相同情况下，不包括边框。

//音乐播放器模块、
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";
            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;
//    }

};