Stylophone – Web Audio API

"use strict";

try {
  window.AudioContext = window.AudioContext || window.webkitAudioContext;
  window.audioContext = new window.AudioContext();
} catch (e) {
  console.log("No Web Audio API support");
}

// Create Web Audio Context.
var context = new window.AudioContext(),
    currentOscillator,
    noteOn = false;

function playFreq (frequency) {

  // Create oscillator and gain node.
  var oscillator = context.createOscillator(),
      gainNode = context.createGain();

  // Disconnect existing oscillator if there is one.
  if (currentOscillator) {
    currentOscillator.disconnect();
  }

  // Set the type and frequency of the oscillator.
  oscillator.type = "sawtooth";
  oscillator.frequency.value = frequency;

  // Set volume of the oscillator.
  gainNode.gain.value = 0.1;

  // Route oscillator through gain node to speakers.
  oscillator.connect(gainNode);
  gainNode.connect(context.destination);

  // Set the current oscillator to the one we've just created.
  currentOscillator = oscillator;

  // Start oscillator playing.
  oscillator.start(0);
};

var stopNote = function () {

  // Stop the current Oscillator from playing then disconnect it.
  if (currentOscillator) {
    currentOscillator.stop(0);
    currentOscillator.disconnect();
  }
};

function listenKeys(e) {
  if (e.target && (e.target.nodeName === "rect" || e.target.nodeName === "polyline")) {

    switch (e.type) {
      case "mousedown" :
        noteOn = true;
        playFreq(e.target.getAttribute("data-freq"));
        break;
      case "mouseover" :
        if (noteOn) {
          playFreq(e.target.getAttribute("data-freq"));
        }
        break;
      case "mouseup":
        noteOn = false;
        stopNote();
        break;
    }
  }
}

var keys = document.getElementById("keys");
if (keys) {
  keys.addEventListener("mousedown", listenKeys, false);
  keys.addEventListener("mouseover", listenKeys, false);
  keys.addEventListener("mouseup", listenKeys, false);
}