// ------ shared.js

// Start off by initializing a new context.

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

var frequencyRenderer;

​

//---------- events.js

​

​

​

​

  function configureSlider(name, value, min, max, handler) {

      // var controls = document.getElementById("controls");

      // 

​

      var divName = name + "Slider";

​

      var slider = document.getElementById(divName);

​

      slider.min = min;

      slider.max = max;

      slider.value = value;

      slider.oninput = function() { handler(0, this); };

  }

// Events

// init() once the page has finished loading.

window.onload = init;

​

var filter;

var filters = [];

​

var frequency = 2000;

var resonance = 5;

var gain = 2;

​

var canvas;

var canvasContext;

​

​

function frequencyHandler(event, ui) {

  var value = ui.value;

  var nyquist = context.sampleRate * 0.5;

  var noctaves = Math.log(nyquist / 10.0) / Math.LN2;

  var v2 = Math.pow(2.0, noctaves * (value - 1.0));

  var cutoff = v2*nyquist;

  var info = document.getElementById("frequency-value");

  info.innerHTML = "frequency = " + (Math.floor(cutoff*100)/100) + " Hz";

​

  filter.frequency.value = cutoff;

  frequencyRenderer.draw(filters);

}

​

function resonanceHandler(event, ui) {

  var value = ui.value;

​

  var info = document.getElementById("Q-value");

  info.innerHTML = "Q = " + (Math.floor(value*100)/100) + " dB";

  filter.Q.value = value; // !! Q value not same as resonance...

  frequencyRenderer.draw(filters);

}

​

function gainHandler(event, ui) {

  var value = ui.value;

​

  var info = document.getElementById("gain-value");

  info.innerHTML = "gain = " + (Math.floor(value*100)/100);

  filter.gain.value = value;

  frequencyRenderer.draw(filters);

}

​

​

function initAudio() {

    filter = context.createBiquadFilter();

    filter.Q.value = 5;

    filter.frequency.value = 2000;

    filter.gain.value = 2;

    filter.connect(context.destination);

  filters.push(filter);

  // * filters from multiband EQ

  /*

      [60, 170, 350, 1000, 3500, 10000].forEach(function(freq, i) {

          var eq = context.createBiquadFilter();

          eq.frequency.value = freq;

          eq.type = "peaking";

          eq.gain.value = -30+Math.random()*60;

          filters.push(eq);

    });

*/

}

​

function init() {

    initAudio();

    canvas = document.getElementById('canvasID');

    canvasContext = canvas.getContext('2d');

    configureSlider("frequency", 0.68, 0, 1, frequencyHandler);

    configureSlider("Q", resonance, 0, 30, resonanceHandler);

    configureSlider("gain", gain, -30, 30, gainHandler);

    frequencyRenderer = new FilterFrequencyResponseRenderer(canvas, context);

    frequencyRenderer.draw(filters);

}

​

function changeFilterType( value ) {

  filter.type = value;

  frequencyRenderer.draw(filters);

}

​

// ----------- FILTER RESPONSE RENDERER

function FilterFrequencyResponseRenderer(canvas, audioCxt) {

  var c = canvas;

  var ctx = c.getContext('2d'); 

  var width = c.width;

  var height = c.height;

​

  var audioContext = audioCxt;

  var curveColor = "rgb(224,27,106)";

  var playheadColor = "rgb(80, 100, 80)";

  var gridColor = "rgb(100,100,100)";

  var textColor = "rgb(81,127,207)";

​

  var dbScale = 60;

  var pixelsPerDb;

  var dbToY = function(db) {

    var y = (0.5 * height) - pixelsPerDb * db;

    return y;

  };

​

  var draw = function(filters) {

    ctx.save();

​

    ctx.clearRect(0, 0, width, height);

    var frequencyHz = new Float32Array(width);

    var magResponse = new Float32Array(width);

    var phaseResponse = new Float32Array(width);

    var nyquist = 0.5 * audioContext.sampleRate;

    var noctaves = 11;

​

    filters.forEach(function(filt) {

    ctx.strokeStyle = curveColor;

    ctx.lineWidth = 3;

    ctx.beginPath();

    ctx.moveTo(0, 0);

​

    pixelsPerDb = (0.5 * height) / dbScale;

    // First get response.

    for (var i = 0; i < width; ++i) {

        var f = i / width;

        // Convert to log frequency scale (octaves).

        f = nyquist * Math.pow(2.0, noctaves * (f - 1.0));

        frequencyHz[i] = f;

    }

       filt.getFrequencyResponse(frequencyHz, magResponse, phaseResponse);

      /*

    var magResponseOfFilter = new Float32Array(width);

    filt.getFrequencyResponse(frequencyHz, magResponseOfFilter, phaseResponse);

    // sum it to magResponse

    for(var l = 0; l < width; l++) {

      magResponse[l] = magResponseOfFilter[l];

    }

    */

​

    for (var i = 0; i < width; ++i) {

        var f = magResponse[i];

        var response = magResponse[i];

        var dbResponse = 20.0 * Math.log(response) / Math.LN10;

        var x = i;

        var y = dbToY(dbResponse);

        if ( i === 0 )

            ctx.moveTo(x,y);

        else

            ctx.lineTo(x, y);

    }

    ctx.stroke();

    ctx.beginPath();

    ctx.lineWidth = 1;

    ctx.strokeStyle = gridColor;

    // Draw frequency scale.

    for (var octave = 0; octave <= noctaves; octave++) {

        var x = octave * width / noctaves;

        ctx.strokeStyle = gridColor;

        ctx.moveTo(x, 30);

        ctx.lineTo(x, height);

        ctx.stroke();

​

        var f = nyquist * Math.pow(2.0, octave - noctaves);

        var value = f.toFixed(0);

        var unit = 'Hz';

        if (f > 1000) {

          unit = 'KHz';

          value = (f/1000).toFixed(1);

        }

        ctx.textAlign = "center";

        ctx.strokeStyle = textColor;

        ctx.strokeText(value + unit, x, 20);

    }

​

    // Draw 0dB line.

    ctx.beginPath();

    ctx.moveTo(0, 0.5 * height);

    ctx.lineTo(width, 0.5 * height);

    ctx.stroke();

    // Draw decibel scale.

    for (var db = -dbScale; db < dbScale - 10; db += 10) {

        var y = dbToY(db);

        ctx.strokeStyle = textColor;

        ctx.strokeText(db.toFixed(0) + "dB", width - 40, y);

        ctx.strokeStyle = gridColor;

        ctx.beginPath();

        ctx.moveTo(0, y);

        ctx.lineTo(width, y);

        ctx.stroke();

    }

      });

    ctx.restore();

  };

  return {

    draw: draw

  };

}

​

​