function Spectrogram(filename, selector, options = {}) {
    this.options = options;

    var SMOOTHING = 0.0;
    var FFT_SIZE = 2048;

    // this.sampleRate = 256;
    this.sampleRate = options.sampleSize || 512;
    this.decRange = [-80.0, 80.0];

    this.width = options.width || 900;
    this.height = options.height || 440;
    this.margin = options.margin || {
        top: 20,
        right: 20,
        bottom: 30,
        left: 50
    };

    this.colorScheme = options.colorScheme || ['#ffffff', '#f0f0f0', '#d9d9d9', '#bdbdbd', '#969696', '#737373', '#525252', '#252525', '#000000'];
    this.zoomScale = 1;

    this.selector = selector;
    this.filename = filename;

    this.context = new(window.AudioContext || window.webkitAudioContext)();

    // setup a analyzer
    this.analyser = this.context.createAnalyser();
    this.analyser.minDecibels = this.decRange[0];
    this.analyser.maxDecibels = this.decRange[1];
    this.analyser.smoothingTimeConstant = SMOOTHING;
    this.analyser.fftSize = FFT_SIZE;

    // mute the sound
    this.volume = this.context.createGain();
    this.volume.gain.value = 0;

    // Create a ScriptProcessorNode with a bufferSize of this.sampleRate and a single input and output channel
    this.scriptNode = this.context.createScriptProcessor(this.sampleRate, 1, 1);

    this.freqs = new Uint8Array(this.analyser.frequencyBinCount);
    this.data = [];

    this.isPlaying = false;
    this.isLoaded = false;
    this.startTime = 0;
    // this.startOffset = 0;
    this.count = 0;
    this.curSec = 0;
    this.maxCount = 0;

    loadSounds(this, this.context, {
        buffer: this.filename
    }, this.setupVisual.bind(this));
}
/**
 * Spectrogram class
 * sets up most of the configuration for the sound analysis
 * and then loads the sound using loadSounds.
 * Once finished loading, the setupVisual callback is called.
 * @param {String} filename - takes a filename
 * @param {String} selector - id to use to figure out where to display
 * @param {Object} options - Options default is {}
 */
Spectrogram class
sets up most of the configuration for the sound analysis
and then loads the sound using loadSounds.
Once finished loading, the setupVisual callback is called.
@param {String} filename - takes a filename
@param {String} selector - id to use to figure out where to display
@param {Object} options - Options default is {}
Spectrogram class sets up most of the configuration for the sound analysis and then loads the sound using loadSounds . Once finished loading the setupVisual callback is called . @param { String } filename - takes a filename @param { String } selector - id to use to figure out where to display @param { Object } options - Options default is {}
function Spectrogram(filename, selector, options = {}) {
    this.options = options;
    var SMOOTHING = 0.0;
    var FFT_SIZE = 2048;
    this.sampleRate = options.sampleSize || 512;
    this.decRange = [-80.0, 80.0];
    this.width = options.width || 900;
    this.height = options.height || 440;
    this.margin = options.margin || {
        top: 20,
        right: 20,
        bottom: 30,
        left: 50
    };
    this.colorScheme = options.colorScheme || ['#ffffff', '#f0f0f0', '#d9d9d9', '#bdbdbd', '#969696', '#737373', '#525252', '#252525', '#000000'];
    this.zoomScale = 1;
    this.selector = selector;
    this.filename = filename;
    this.context = new(window.AudioContext || window.webkitAudioContext)();
    this.analyser = this.context.createAnalyser();
    this.analyser.minDecibels = this.decRange[0];
    this.analyser.maxDecibels = this.decRange[1];
    this.analyser.smoothingTimeConstant = SMOOTHING;
    this.analyser.fftSize = FFT_SIZE;
    this.volume = this.context.createGain();
    this.volume.gain.value = 0;
    this.scriptNode = this.context.createScriptProcessor(this.sampleRate, 1, 1);
    this.freqs = new Uint8Array(this.analyser.frequencyBinCount);
    this.data = [];
    this.isPlaying = false;
    this.isLoaded = false;
    this.startTime = 0;
    this.count = 0;
    this.curSec = 0;
    this.maxCount = 0;
    loadSounds(this, this.context, {
        buffer: this.filename
    }, this.setupVisual.bind(this));
}
function Spectrogram ( filename , selector , options = { } ) { this . options = options ; var SMOOTHING = 0.0 ; var FFT_SIZE = 2048 ; this . sampleRate = options . sampleSize || 512 ; this . decRange = [ - 80.0 , 80.0 ] ; this . width = options . width || 900 ; this . height = options . height || 440 ; this . margin = options . margin || { top : 20 , right : 20 , bottom : 30 , left : 50 } ; this . colorScheme = options . colorScheme || [ '#ffffff' , '#f0f0f0' , '#d9d9d9' , '#bdbdbd' , '#969696' , '#737373' , '#525252' , '#252525' , '#000000' ] ; this . zoomScale = 1 ; this . selector = selector ; this . filename = filename ; this . context = new ( window . AudioContext || window . webkitAudioContext ) ( ) ; this . analyser = this . context . createAnalyser ( ) ; this . analyser . minDecibels = this . decRange [ 0 ] ; this . analyser . maxDecibels = this . decRange [ 1 ] ; this . analyser . smoothingTimeConstant = SMOOTHING ; this . analyser . fftSize = FFT_SIZE ; this . volume = this . context . createGain ( ) ; this . volume . gain . value = 0 ; this . scriptNode = this . context . createScriptProcessor ( this . sampleRate , 1 , 1 ) ; this . freqs = new Uint8Array ( this . analyser . frequencyBinCount ) ; this . data = [ ] ; this . isPlaying = false ; this . isLoaded = false ; this . startTime = 0 ; this . count = 0 ; this . curSec = 0 ; this . maxCount = 0 ; loadSounds ( this , this . context , { buffer : this . filename } , this . setupVisual . bind ( this ) ) ; }
Spectrogram class
 sets up most of the configuration for the sound analysis
 and then loads the sound using loadSounds.
Spectrogram class sets up most of the configuration for the sound analysis and then loads the sound using loadSounds .
// this.sampleRate = 256; // setup a analyzer // mute the sound // Create a ScriptProcessorNode with a bufferSize of this.sampleRate and a single input and output channel // this.startOffset = 0;