JMshake.prototype.canvas = null;
JMshake.prototype.stop = false;
function JMshake(canvas,audio){
    this.canvas = canvas;//canvas
    this.audio = audio;
}
JMshake.prototype.init = function(){

}
JMshake.prototype.eventBing = function(){

}
JMshake.prototype.loadMusic = function(){
    var that = this;
    var context = that.canvas.getContext("2d");
    var WIDTH = that.canvas.width;
    var HEIGHT = that.canvas.height;
    
    //part3: 分析器
    var AudCtx = new AudioContext();//音频内容
    var analyser = AudCtx.createAnalyser();
    var src = AudCtx.createMediaElementSource(that.audio);
    src.connect(analyser);
    analyser.connect(AudCtx.destination);
    analyser.fftSize = 512;//快速傅里叶变换, 必须为2的N次方
    var bufferLength = analyser.frequencyBinCount;// = fftSize * 0.5

    //part4: 变量
    var barWidth = 3;//间隔1px
    var barHeight;
    var dataArray = new Uint8Array(bufferLength);//8位无符号定长数组
    
    //part5: 动态监听
    function renderFrame() {
        context.fillStyle = 'rgba(255, 255, 255, 0)';
        context.clearRect(0, 0, WIDTH, HEIGHT);
        context.fillRect(0, 0, WIDTH, HEIGHT);//画布拓展全屏,动态调整
        analyser.getByteFrequencyData(dataArray);//获取当前时刻的音频数据
        //part6: 绘画声压条
        var x = 0;
        for (var i = 0; i < bufferLength; i++) {
            var data = dataArray[i];//int,0~255
            var percentV = data / 255;//纵向比例
            var percentH = i / bufferLength;//横向比例
            barHeight = HEIGHT * percentV;
            var r = 255 * percentV;//值越大越红
            var g = 255 * percentH;//越靠右越绿
            var b = 50;
            context.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
            x = i*barWidth;//间隔1px
            context.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
        }
        that.animation = requestAnimationFrame(renderFrame);
    }
    that.audio.oncanplaythrough = function Draw() {
        window.cancelAnimationFrame(that.animation);
        delete that.animation;
        renderFrame();
    }

}