scripts/mic_testing/frontend/analysis.js - platform/external/adhd - Git at Google

 /*
  * Copyright (c) 2014 The Chromium OS Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */

 /**
  * Gets a random color
  */
 function getRandomColor() {
   var letters = '0123456789ABCDEF'.split('');
   var color = '#';
   for (var i = 0; i < 6; i++) {
     color += letters[Math.floor(Math.random() * 16)];
   }
   return color;
 }

 /**
  * Audio channel class
  */
 var AudioChannel = function(buffer) {
   this.init = function(buffer) {
     this.buffer = buffer;
     this.fftBuffer = this.toFFT(this.buffer);
     this.curveColor = getRandomColor();
     this.visible = true;
   }

   this.toFFT = function(buffer) {
     var k = Math.ceil(Math.log(buffer.length) / Math.LN2);
     var length = Math.pow(2, k);
     var tmpBuffer = new Float32Array(length);

     for (var i = 0; i < buffer.length; i++) {
       tmpBuffer[i] = buffer[i];
     }
     for (var i = buffer.length; i < length; i++) {
       tmpBuffer[i] = 0;
     }
     var fft = new FFT(length);
     fft.forward(tmpBuffer);
     return fft.spectrum;
   }

   this.init(buffer);
 }

 window.AudioChannel = AudioChannel;

 var numberOfCurve = 0;

 /**
  * Audio curve class
  */
 var AudioCurve = function(buffers, filename, sampleRate) {
   this.init = function(buffers, filename) {
     this.filename = filename;
     this.id = numberOfCurve++;
     this.sampleRate = sampleRate;
     this.channel = [];
     for (var i = 0; i < buffers.length; i++) {
       this.channel.push(new AudioChannel(buffers[i]));
     }
   }
   this.init(buffers, filename);
 }

 window.AudioCurve = AudioCurve;

 /**
  * Draw frequency response of curves on the canvas
  * @param {canvas} HTML canvas element to draw frequency response
  * @param {int} Nyquist frequency, in Hz
  */
 var DrawCanvas = function(canvas, nyquist) {
   var HTML_TABLE_ROW_OFFSET = 2;
   var topMargin = 30;
   var leftMargin = 40;
   var downMargin = 10;
   var rightMargin = 30;
   var width = canvas.width - leftMargin - rightMargin;
   var height = canvas.height - topMargin - downMargin;
   var canvasContext = canvas.getContext('2d');
   var pixelsPerDb = height / 96.0;
   var noctaves = 10;
   var curveBuffer = [];

   findId = function(id) {
     for (var i = 0; i < curveBuffer.length; i++)
       if (curveBuffer[i].id == id)
         return i;
     return -1;
   }

   /**
    * Adds curve on the canvas
    * @param {AudioCurve} audio curve object
    */
   this.add = function(audioCurve) {
     curveBuffer.push(audioCurve);
     addTableList();
     this.drawCanvas();
   }

   /**
    * Removes curve from the canvas
    * @param {int} curve index
    */
   this.remove = function(id) {
     var index = findId(id);
     if (index != -1) {
       curveBuffer.splice(index, 1);
       removeTableList(index);
       this.drawCanvas();
     }
   }

   removeTableList = function(index) {
     var table = document.getElementById('curve_table');
     table.deleteRow(index + HTML_TABLE_ROW_OFFSET);
   }

   addTableList = function() {
     var table = document.getElementById('curve_table');
     var index = table.rows.length - HTML_TABLE_ROW_OFFSET;
     var curve_id = curveBuffer[index].id;
     var tr = table.insertRow(table.rows.length);
     var tdCheckbox = tr.insertCell(0);
     var tdFile = tr.insertCell(1);
     var tdLeft = tr.insertCell(2);
     var tdRight = tr.insertCell(3);
     var tdRemove = tr.insertCell(4);

     var checkbox = document.createElement('input');
     checkbox.setAttribute('type', 'checkbox');
     checkbox.checked = true;
     checkbox.onclick = function() {
       setCurveVisible(checkbox, curve_id, 'all');
     }
     tdCheckbox.appendChild(checkbox);
     tdFile.innerHTML = curveBuffer[index].filename;

     var checkLeft = document.createElement('input');
     checkLeft.setAttribute('type', 'checkbox');
     checkLeft.checked = true;
     checkLeft.onclick = function() {
       setCurveVisible(checkLeft, curve_id, 0);
     }
     tdLeft.bgColor = curveBuffer[index].channel[0].curveColor;
     tdLeft.appendChild(checkLeft);

     if (curveBuffer[index].channel.length > 1) {
       var checkRight = document.createElement('input');
       checkRight.setAttribute('type', 'checkbox');
       checkRight.checked = true;
       checkRight.onclick = function() {
         setCurveVisible(checkRight, curve_id, 1);
       }
       tdRight.bgColor = curveBuffer[index].channel[1].curveColor;
       tdRight.appendChild(checkRight);
     }

     var btnRemove = document.createElement('input');
     btnRemove.setAttribute('type', 'button');
     btnRemove.value = 'Remove';
     btnRemove.onclick = function() { removeCurve(curve_id); }
     tdRemove.appendChild(btnRemove);
   }

   /**
    * Sets visibility of curves
    * @param {boolean} visible or not
    * @param {int} curve index
    * @param {int,string} channel index.
    */
   this.setVisible = function(checkbox, id, channel) {
     var index = findId(id);
     if (channel == 'all') {
       for (var i = 0; i < curveBuffer[index].channel.length; i++) {
         curveBuffer[index].channel[i].visible = checkbox.checked;
       }
     } else if (channel == 0 || channel == 1) {
       curveBuffer[index].channel[channel].visible = checkbox.checked;
     }
     this.drawCanvas();
   }

   /**
    * Draws canvas background
    */
   this.drawBg = function() {
     var gridColor = 'rgb(200,200,200)';
     var textColor = 'rgb(238,221,130)';

     /* Draw the background */
     canvasContext.fillStyle = 'rgb(0, 0, 0)';
     canvasContext.fillRect(0, 0, canvas.width, canvas.height);

     /* Draw frequency scale. */
     canvasContext.beginPath();
     canvasContext.lineWidth = 1;
     canvasContext.strokeStyle = gridColor;

     for (var octave = 0; octave <= noctaves; octave++) {
       var x = octave * width / noctaves + leftMargin;

       canvasContext.moveTo(x, topMargin);
       canvasContext.lineTo(x, topMargin + height);
       canvasContext.stroke();

       var f = nyquist * Math.pow(2.0, octave - noctaves);
       canvasContext.textAlign = 'center';
       canvasContext.strokeText(f.toFixed(0) + 'Hz', x, 20);
     }

     /* Draw 0dB line. */
     canvasContext.beginPath();
     canvasContext.moveTo(leftMargin, topMargin + 0.5 * height);
     canvasContext.lineTo(leftMargin + width, topMargin + 0.5 * height);
     canvasContext.stroke();

     /* Draw decibel scale. */
     for (var db = -96.0; db <= 0; db += 12) {
       var y = topMargin + height - (db + 96) * pixelsPerDb;
       canvasContext.beginPath();
       canvasContext.setLineDash([1, 4]);
       canvasContext.moveTo(leftMargin, y);
       canvasContext.lineTo(leftMargin + width, y);
       canvasContext.stroke();
       canvasContext.setLineDash([]);
       canvasContext.strokeStyle = textColor;
       canvasContext.strokeText(db.toFixed(0) + 'dB', 20, y);
       canvasContext.strokeStyle = gridColor;
     }
   }

   /**
    * Draws a channel of a curve
    * @param {Float32Array} fft buffer of a channel
    * @param {string} curve color
    * @param {int} sample rate
    */
   this.drawCurve = function(buffer, curveColor, sampleRate) {
     canvasContext.beginPath();
     canvasContext.lineWidth = 1;
     canvasContext.strokeStyle = curveColor;
     canvasContext.moveTo(leftMargin, topMargin + height);

     for (var i = 0; i < buffer.length; ++i) {
       var f = i * sampleRate / 2 / nyquist / buffer.length;

       /* Convert to log frequency scale (octaves). */
       f = 1 + Math.log(f) / (noctaves * Math.LN2);
       if (f < 0) { continue; }
       /* Draw the magnitude */
       var x = f * width + leftMargin;
       var value = Math.max(20 * Math.log(buffer[i]) / Math.LN10, -96);
       var y = topMargin + height - ((value + 96) * pixelsPerDb);

       canvasContext.lineTo(x, y);
     }
     canvasContext.stroke();
   }

   /**
    * Draws all curves
    */
   this.drawCanvas = function() {
     this.drawBg();
     for (var i = 0; i < curveBuffer.length; i++) {
       for (var j = 0; j < curveBuffer[i].channel.length; j++) {
         if (curveBuffer[i].channel[j].visible) {
           this.drawCurve(curveBuffer[i].channel[j].fftBuffer,
                          curveBuffer[i].channel[j].curveColor,
                          curveBuffer[i].sampleRate);
         }
       }
     }
   }

   /**
    * Draws current buffer
    * @param {Float32Array} left channel buffer
    * @param {Float32Array} right channel buffer
    * @param {int} sample rate
    */
   this.drawInstantCurve = function(leftData, rightData, sampleRate) {
     this.drawBg();
     var fftLeft = new FFT(leftData.length);
     fftLeft.forward(leftData);
     var fftRight = new FFT(rightData.length);
     fftRight.forward(rightData);
     this.drawCurve(fftLeft.spectrum, "#FF0000", sampleRate);
     this.drawCurve(fftRight.spectrum, "#00FF00", sampleRate);
   }

   exportCurveByFreq = function(freqList) {
     function calcIndex(freq, length, sampleRate) {
       var idx = parseInt(freq * length * 2 / sampleRate);
       return Math.min(idx, length - 1);
     }
     /* header */
     channelName = ['L', 'R'];
     cvsString = 'freq';
     for (var i = 0; i < curveBuffer.length; i++) {
       for (var j = 0; j < curveBuffer[i].channel.length; j++) {
         cvsString += ',' + curveBuffer[i].filename + '_' + channelName[j];
       }
     }
     for (var i = 0; i < freqList.length; i++) {
       cvsString += '\n' + freqList[i];
       for (var j = 0; j < curveBuffer.length; j++) {
         var curve = curveBuffer[j];
         for (var k = 0; k < curve.channel.length; k++) {
           var fftBuffer = curve.channel[k].fftBuffer;
           var prevIdx = (i - 1 < 0) ? 0 :
               calcIndex(freqList[i - 1], fftBuffer.length, curve.sampleRate);
           var currIdx = calcIndex(
               freqList[i], fftBuffer.length, curve.sampleRate);

           var sum = 0;
           for (var l = prevIdx; l <= currIdx; l++) { // Get average
             var value = 20 * Math.log(fftBuffer[l]) / Math.LN10;
             sum += value;
           }
           cvsString += ',' + sum / (currIdx - prevIdx + 1);
         }
       }
     }
     return cvsString;
   }

   /**
    * Exports frequency response of curves into CSV format
    * @param {int} point number in octaves
    * @return {string} a string with CSV format
    */
   this.exportCurve = function(nInOctaves) {
     var freqList= [];
     for (var i = 0; i < noctaves; i++) {
       var fStart = nyquist * Math.pow(2.0, i - noctaves);
       var fEnd = nyquist * Math.pow(2.0, i + 1 - noctaves);
       var powerStart = Math.log(fStart) / Math.LN2;
       var powerEnd = Math.log(fEnd) / Math.LN2;
       for (var j = 0; j < nInOctaves; j++) {
         f = Math.pow(2,
             powerStart + j * (powerEnd - powerStart) / nInOctaves);
         freqList.push(f);
       }
     }
     freqList.push(nyquist);
     return exportCurveByFreq(freqList);
   }
 }

 window.DrawCanvas = DrawCanvas;

 /**
  * FFT is a class for calculating the Discrete Fourier Transform of a signal
  * with the Fast Fourier Transform algorithm.
  *
  * @param {Number} bufferSize The size of the sample buffer to be computed.
  * Must be power of 2
  * @constructor
  */
 function FFT(bufferSize) {
   this.bufferSize = bufferSize;
   this.spectrum   = new Float32Array(bufferSize/2);
   this.real       = new Float32Array(bufferSize);
   this.imag       = new Float32Array(bufferSize);

   this.reverseTable = new Uint32Array(bufferSize);
   this.sinTable = new Float32Array(bufferSize);
   this.cosTable = new Float32Array(bufferSize);

   var limit = 1;
   var bit = bufferSize >> 1;
   var i;

   while (limit < bufferSize) {
     for (i = 0; i < limit; i++) {
       this.reverseTable[i + limit] = this.reverseTable[i] + bit;
     }

     limit = limit << 1;
     bit = bit >> 1;
   }

   for (i = 0; i < bufferSize; i++) {
     this.sinTable[i] = Math.sin(-Math.PI/i);
     this.cosTable[i] = Math.cos(-Math.PI/i);
   }
 }

 /**
  * Performs a forward transform on the sample buffer.
  * Converts a time domain signal to frequency domain spectra.
  *
  * @param {Array} buffer The sample buffer. Buffer Length must be power of 2
  * @returns The frequency spectrum array
  */
 FFT.prototype.forward = function(buffer) {
   var bufferSize      = this.bufferSize,
       cosTable        = this.cosTable,
       sinTable        = this.sinTable,
       reverseTable    = this.reverseTable,
       real            = this.real,
       imag            = this.imag,
       spectrum        = this.spectrum;

   var k = Math.floor(Math.log(bufferSize) / Math.LN2);

   if (Math.pow(2, k) !== bufferSize) {
     throw "Invalid buffer size, must be a power of 2.";
   }
   if (bufferSize !== buffer.length) {
     throw "Supplied buffer is not the same size as defined FFT. FFT Size: "
         + bufferSize + " Buffer Size: " + buffer.length;
   }

   var halfSize = 1,
       phaseShiftStepReal,
       phaseShiftStepImag,
       currentPhaseShiftReal,
       currentPhaseShiftImag,
       off,
       tr,
       ti,
       tmpReal,
       i;

   for (i = 0; i < bufferSize; i++) {
     real[i] = buffer[reverseTable[i]];
     imag[i] = 0;
   }

   while (halfSize < bufferSize) {
     phaseShiftStepReal = cosTable[halfSize];
     phaseShiftStepImag = sinTable[halfSize];

     currentPhaseShiftReal = 1.0;
     currentPhaseShiftImag = 0.0;

     for (var fftStep = 0; fftStep < halfSize; fftStep++) {
       i = fftStep;

       while (i < bufferSize) {
         off = i + halfSize;
         tr = (currentPhaseShiftReal * real[off]) -
             (currentPhaseShiftImag * imag[off]);
         ti = (currentPhaseShiftReal * imag[off]) +
             (currentPhaseShiftImag * real[off]);
         real[off] = real[i] - tr;
         imag[off] = imag[i] - ti;
         real[i] += tr;
         imag[i] += ti;

         i += halfSize << 1;
       }

       tmpReal = currentPhaseShiftReal;
       currentPhaseShiftReal = (tmpReal * phaseShiftStepReal) -
           (currentPhaseShiftImag * phaseShiftStepImag);
       currentPhaseShiftImag = (tmpReal * phaseShiftStepImag) +
           (currentPhaseShiftImag * phaseShiftStepReal);
     }

     halfSize = halfSize << 1;
   }

   i = bufferSize / 2;
   while(i--) {
     spectrum[i] = 2 * Math.sqrt(real[i] * real[i] + imag[i] * imag[i]) /
         bufferSize;
   }
 };

 function setCurveVisible(checkbox, id, channel) {
   drawContext.setVisible(checkbox, id, channel);
 }

 function removeCurve(id) {
   drawContext.remove(id);
 }
	/*
	* Copyright (c) 2014 The Chromium OS Authors. All rights reserved.
	* Use of this source code is governed by a BSD-style license that can be
	* found in the LICENSE file.
	*/

	/**
	* Gets a random color
	*/
	function getRandomColor() {
	var letters = '0123456789ABCDEF'.split('');
	var color = '#';
	for (var i = 0; i < 6; i++) {
	color += letters[Math.floor(Math.random() * 16)];
	}
	return color;
	}

	/**
	* Audio channel class
	*/
	var AudioChannel = function(buffer) {
	this.init = function(buffer) {
	this.buffer = buffer;
	this.fftBuffer = this.toFFT(this.buffer);
	this.curveColor = getRandomColor();
	this.visible = true;
	}

	this.toFFT = function(buffer) {
	var k = Math.ceil(Math.log(buffer.length) / Math.LN2);
	var length = Math.pow(2, k);
	var tmpBuffer = new Float32Array(length);

	for (var i = 0; i < buffer.length; i++) {
	tmpBuffer[i] = buffer[i];
	}
	for (var i = buffer.length; i < length; i++) {
	tmpBuffer[i] = 0;
	}
	var fft = new FFT(length);
	fft.forward(tmpBuffer);
	return fft.spectrum;
	}

	this.init(buffer);
	}

	window.AudioChannel = AudioChannel;

	var numberOfCurve = 0;

	/**
	* Audio curve class
	*/
	var AudioCurve = function(buffers, filename, sampleRate) {
	this.init = function(buffers, filename) {
	this.filename = filename;
	this.id = numberOfCurve++;
	this.sampleRate = sampleRate;
	this.channel = [];
	for (var i = 0; i < buffers.length; i++) {
	this.channel.push(new AudioChannel(buffers[i]));
	}
	}
	this.init(buffers, filename);
	}

	window.AudioCurve = AudioCurve;

	/**
	* Draw frequency response of curves on the canvas
	* @param {canvas} HTML canvas element to draw frequency response
	* @param {int} Nyquist frequency, in Hz
	*/
	var DrawCanvas = function(canvas, nyquist) {
	var HTML_TABLE_ROW_OFFSET = 2;
	var topMargin = 30;
	var leftMargin = 40;
	var downMargin = 10;
	var rightMargin = 30;
	var width = canvas.width - leftMargin - rightMargin;
	var height = canvas.height - topMargin - downMargin;
	var canvasContext = canvas.getContext('2d');
	var pixelsPerDb = height / 96.0;
	var noctaves = 10;
	var curveBuffer = [];

	findId = function(id) {
	for (var i = 0; i < curveBuffer.length; i++)
	if (curveBuffer[i].id == id)
	return i;
	return -1;
	}

	/**
	* Adds curve on the canvas
	* @param {AudioCurve} audio curve object
	*/
	this.add = function(audioCurve) {
	curveBuffer.push(audioCurve);
	addTableList();
	this.drawCanvas();
	}

	/**
	* Removes curve from the canvas
	* @param {int} curve index
	*/
	this.remove = function(id) {
	var index = findId(id);
	if (index != -1) {
	curveBuffer.splice(index, 1);
	removeTableList(index);
	this.drawCanvas();
	}
	}

	removeTableList = function(index) {
	var table = document.getElementById('curve_table');
	table.deleteRow(index + HTML_TABLE_ROW_OFFSET);
	}

	addTableList = function() {
	var table = document.getElementById('curve_table');
	var index = table.rows.length - HTML_TABLE_ROW_OFFSET;
	var curve_id = curveBuffer[index].id;
	var tr = table.insertRow(table.rows.length);
	var tdCheckbox = tr.insertCell(0);
	var tdFile = tr.insertCell(1);
	var tdLeft = tr.insertCell(2);
	var tdRight = tr.insertCell(3);
	var tdRemove = tr.insertCell(4);

	var checkbox = document.createElement('input');
	checkbox.setAttribute('type', 'checkbox');
	checkbox.checked = true;
	checkbox.onclick = function() {
	setCurveVisible(checkbox, curve_id, 'all');
	}
	tdCheckbox.appendChild(checkbox);
	tdFile.innerHTML = curveBuffer[index].filename;

	var checkLeft = document.createElement('input');
	checkLeft.setAttribute('type', 'checkbox');
	checkLeft.checked = true;
	checkLeft.onclick = function() {
	setCurveVisible(checkLeft, curve_id, 0);
	}
	tdLeft.bgColor = curveBuffer[index].channel[0].curveColor;
	tdLeft.appendChild(checkLeft);

	if (curveBuffer[index].channel.length > 1) {
	var checkRight = document.createElement('input');
	checkRight.setAttribute('type', 'checkbox');
	checkRight.checked = true;
	checkRight.onclick = function() {
	setCurveVisible(checkRight, curve_id, 1);
	}
	tdRight.bgColor = curveBuffer[index].channel[1].curveColor;
	tdRight.appendChild(checkRight);
	}

	var btnRemove = document.createElement('input');
	btnRemove.setAttribute('type', 'button');
	btnRemove.value = 'Remove';
	btnRemove.onclick = function() { removeCurve(curve_id); }
	tdRemove.appendChild(btnRemove);
	}

	/**
	* Sets visibility of curves
	* @param {boolean} visible or not
	* @param {int} curve index
	* @param {int,string} channel index.
	*/
	this.setVisible = function(checkbox, id, channel) {
	var index = findId(id);
	if (channel == 'all') {
	for (var i = 0; i < curveBuffer[index].channel.length; i++) {
	curveBuffer[index].channel[i].visible = checkbox.checked;
	}
	} else if (channel == 0 \|\| channel == 1) {
	curveBuffer[index].channel[channel].visible = checkbox.checked;
	}
	this.drawCanvas();
	}

	/**
	* Draws canvas background
	*/
	this.drawBg = function() {
	var gridColor = 'rgb(200,200,200)';
	var textColor = 'rgb(238,221,130)';

	/* Draw the background */
	canvasContext.fillStyle = 'rgb(0, 0, 0)';
	canvasContext.fillRect(0, 0, canvas.width, canvas.height);

	/* Draw frequency scale. */
	canvasContext.beginPath();
	canvasContext.lineWidth = 1;
	canvasContext.strokeStyle = gridColor;

	for (var octave = 0; octave <= noctaves; octave++) {
	var x = octave * width / noctaves + leftMargin;

	canvasContext.moveTo(x, topMargin);
	canvasContext.lineTo(x, topMargin + height);
	canvasContext.stroke();

	var f = nyquist * Math.pow(2.0, octave - noctaves);
	canvasContext.textAlign = 'center';
	canvasContext.strokeText(f.toFixed(0) + 'Hz', x, 20);
	}

	/* Draw 0dB line. */
	canvasContext.beginPath();
	canvasContext.moveTo(leftMargin, topMargin + 0.5 * height);
	canvasContext.lineTo(leftMargin + width, topMargin + 0.5 * height);
	canvasContext.stroke();

	/* Draw decibel scale. */
	for (var db = -96.0; db <= 0; db += 12) {
	var y = topMargin + height - (db + 96) * pixelsPerDb;
	canvasContext.beginPath();
	canvasContext.setLineDash([1, 4]);
	canvasContext.moveTo(leftMargin, y);
	canvasContext.lineTo(leftMargin + width, y);
	canvasContext.stroke();
	canvasContext.setLineDash([]);
	canvasContext.strokeStyle = textColor;
	canvasContext.strokeText(db.toFixed(0) + 'dB', 20, y);
	canvasContext.strokeStyle = gridColor;
	}
	}

	/**
	* Draws a channel of a curve
	* @param {Float32Array} fft buffer of a channel
	* @param {string} curve color
	* @param {int} sample rate
	*/
	this.drawCurve = function(buffer, curveColor, sampleRate) {
	canvasContext.beginPath();
	canvasContext.lineWidth = 1;
	canvasContext.strokeStyle = curveColor;
	canvasContext.moveTo(leftMargin, topMargin + height);

	for (var i = 0; i < buffer.length; ++i) {
	var f = i * sampleRate / 2 / nyquist / buffer.length;

	/* Convert to log frequency scale (octaves). */
	f = 1 + Math.log(f) / (noctaves * Math.LN2);
	if (f < 0) { continue; }
	/* Draw the magnitude */
	var x = f * width + leftMargin;
	var value = Math.max(20 * Math.log(buffer[i]) / Math.LN10, -96);
	var y = topMargin + height - ((value + 96) * pixelsPerDb);

	canvasContext.lineTo(x, y);
	}
	canvasContext.stroke();
	}

	/**
	* Draws all curves
	*/
	this.drawCanvas = function() {
	this.drawBg();
	for (var i = 0; i < curveBuffer.length; i++) {
	for (var j = 0; j < curveBuffer[i].channel.length; j++) {
	if (curveBuffer[i].channel[j].visible) {
	this.drawCurve(curveBuffer[i].channel[j].fftBuffer,
	curveBuffer[i].channel[j].curveColor,
	curveBuffer[i].sampleRate);
	}
	}
	}
	}

	/**
	* Draws current buffer
	* @param {Float32Array} left channel buffer
	* @param {Float32Array} right channel buffer
	* @param {int} sample rate
	*/
	this.drawInstantCurve = function(leftData, rightData, sampleRate) {
	this.drawBg();
	var fftLeft = new FFT(leftData.length);
	fftLeft.forward(leftData);
	var fftRight = new FFT(rightData.length);
	fftRight.forward(rightData);
	this.drawCurve(fftLeft.spectrum, "#FF0000", sampleRate);
	this.drawCurve(fftRight.spectrum, "#00FF00", sampleRate);
	}

	exportCurveByFreq = function(freqList) {
	function calcIndex(freq, length, sampleRate) {
	var idx = parseInt(freq * length * 2 / sampleRate);
	return Math.min(idx, length - 1);
	}
	/* header */
	channelName = ['L', 'R'];
	cvsString = 'freq';
	for (var i = 0; i < curveBuffer.length; i++) {
	for (var j = 0; j < curveBuffer[i].channel.length; j++) {
	cvsString += ',' + curveBuffer[i].filename + '_' + channelName[j];
	}
	}
	for (var i = 0; i < freqList.length; i++) {
	cvsString += '\n' + freqList[i];
	for (var j = 0; j < curveBuffer.length; j++) {
	var curve = curveBuffer[j];
	for (var k = 0; k < curve.channel.length; k++) {
	var fftBuffer = curve.channel[k].fftBuffer;
	var prevIdx = (i - 1 < 0) ? 0 :
	calcIndex(freqList[i - 1], fftBuffer.length, curve.sampleRate);
	var currIdx = calcIndex(
	freqList[i], fftBuffer.length, curve.sampleRate);

	var sum = 0;
	for (var l = prevIdx; l <= currIdx; l++) { // Get average
	var value = 20 * Math.log(fftBuffer[l]) / Math.LN10;
	sum += value;
	}
	cvsString += ',' + sum / (currIdx - prevIdx + 1);
	}
	}
	}
	return cvsString;
	}

	/**
	* Exports frequency response of curves into CSV format
	* @param {int} point number in octaves
	* @return {string} a string with CSV format
	*/
	this.exportCurve = function(nInOctaves) {
	var freqList= [];
	for (var i = 0; i < noctaves; i++) {
	var fStart = nyquist * Math.pow(2.0, i - noctaves);
	var fEnd = nyquist * Math.pow(2.0, i + 1 - noctaves);
	var powerStart = Math.log(fStart) / Math.LN2;
	var powerEnd = Math.log(fEnd) / Math.LN2;
	for (var j = 0; j < nInOctaves; j++) {
	f = Math.pow(2,
	powerStart + j * (powerEnd - powerStart) / nInOctaves);
	freqList.push(f);
	}
	}
	freqList.push(nyquist);
	return exportCurveByFreq(freqList);
	}
	}

	window.DrawCanvas = DrawCanvas;

	/**
	* FFT is a class for calculating the Discrete Fourier Transform of a signal
	* with the Fast Fourier Transform algorithm.
	*
	* @param {Number} bufferSize The size of the sample buffer to be computed.
	* Must be power of 2
	* @constructor
	*/
	function FFT(bufferSize) {
	this.bufferSize = bufferSize;
	this.spectrum = new Float32Array(bufferSize/2);
	this.real = new Float32Array(bufferSize);
	this.imag = new Float32Array(bufferSize);

	this.reverseTable = new Uint32Array(bufferSize);
	this.sinTable = new Float32Array(bufferSize);
	this.cosTable = new Float32Array(bufferSize);

	var limit = 1;
	var bit = bufferSize >> 1;
	var i;

	while (limit < bufferSize) {
	for (i = 0; i < limit; i++) {
	this.reverseTable[i + limit] = this.reverseTable[i] + bit;
	}

	limit = limit << 1;
	bit = bit >> 1;
	}

	for (i = 0; i < bufferSize; i++) {
	this.sinTable[i] = Math.sin(-Math.PI/i);
	this.cosTable[i] = Math.cos(-Math.PI/i);
	}
	}

	/**
	* Performs a forward transform on the sample buffer.
	* Converts a time domain signal to frequency domain spectra.
	*
	* @param {Array} buffer The sample buffer. Buffer Length must be power of 2
	* @returns The frequency spectrum array
	*/
	FFT.prototype.forward = function(buffer) {
	var bufferSize = this.bufferSize,
	cosTable = this.cosTable,
	sinTable = this.sinTable,
	reverseTable = this.reverseTable,
	real = this.real,
	imag = this.imag,
	spectrum = this.spectrum;

	var k = Math.floor(Math.log(bufferSize) / Math.LN2);

	if (Math.pow(2, k) !== bufferSize) {
	throw "Invalid buffer size, must be a power of 2.";
	}
	if (bufferSize !== buffer.length) {
	throw "Supplied buffer is not the same size as defined FFT. FFT Size: "
	+ bufferSize + " Buffer Size: " + buffer.length;
	}

	var halfSize = 1,
	phaseShiftStepReal,
	phaseShiftStepImag,
	currentPhaseShiftReal,
	currentPhaseShiftImag,
	off,
	tr,
	ti,
	tmpReal,
	i;

	for (i = 0; i < bufferSize; i++) {
	real[i] = buffer[reverseTable[i]];
	imag[i] = 0;
	}

	while (halfSize < bufferSize) {
	phaseShiftStepReal = cosTable[halfSize];
	phaseShiftStepImag = sinTable[halfSize];

	currentPhaseShiftReal = 1.0;
	currentPhaseShiftImag = 0.0;

	for (var fftStep = 0; fftStep < halfSize; fftStep++) {
	i = fftStep;

	while (i < bufferSize) {
	off = i + halfSize;
	tr = (currentPhaseShiftReal * real[off]) -
	(currentPhaseShiftImag * imag[off]);
	ti = (currentPhaseShiftReal * imag[off]) +
	(currentPhaseShiftImag * real[off]);
	real[off] = real[i] - tr;
	imag[off] = imag[i] - ti;
	real[i] += tr;
	imag[i] += ti;

	i += halfSize << 1;
	}

	tmpReal = currentPhaseShiftReal;
	currentPhaseShiftReal = (tmpReal * phaseShiftStepReal) -
	(currentPhaseShiftImag * phaseShiftStepImag);
	currentPhaseShiftImag = (tmpReal * phaseShiftStepImag) +
	(currentPhaseShiftImag * phaseShiftStepReal);
	}

	halfSize = halfSize << 1;
	}

	i = bufferSize / 2;
	while(i--) {
	spectrum[i] = 2 * Math.sqrt(real[i] * real[i] + imag[i] * imag[i]) /
	bufferSize;
	}
	};

	function setCurveVisible(checkbox, id, channel) {
	drawContext.setVisible(checkbox, id, channel);
	}

	function removeCurve(id) {
	drawContext.remove(id);
	}