       g = Math.round(Math.sin(freqG * i + phaseG) * width + center)
       b = Math.round(Math.sin(freqB * i + phaseB) * width + center)
       @canvasContext.fillStyle = rgb2Color(r, g, b)
-      console.log @canvasContext.fillStyle, i, r, g, b
       @canvasContext.fillRect 0, yInc * i, @width, @height
+
+class Synth
+  constructor: (@audioContext) ->
+    @vco = @_createVco()
+    @vca = @_createVca()
+    @vco.connect @vca
+    @vca.connect @audioContext.destination
+
+  playPad: (x, y) ->
+    midiNoteNumber = Math.round(y * NUM_KEYBOARD_NOTES) + KEYBOARD_START
+    @playMidiNote(midiNoteNumber)
+
+  playMidiNote: (midiNoteNumber) ->
+    noteFrequencyHz = 27.5 * Math.pow(2, (midiNoteNumber - 21) / 12)
+    @vco.frequency.value = noteFrequencyHz
+    @vca.gain.value = 1
+    window.setTimeout((=>
+      @vca.gain.value = 0), 50)
+
+  _createVco: ->
+    vco = @audioContext.createOscillator()
+    vco.type = vco.SQUARE
+    vco.frequency.value = 0
+    vco.start(0)
+    vco
+
+  _createVca: ->
+    vca = @audioContext.createGain()
+    vca.gain.value = 0
+    vca
 
 
 if Meteor.isClient

    @canvasContext = canvas.getContext '2d'

  drawKeys: ->
    freqR = 0.05
    freqG = 0.05
    freqB = 0.05
    phaseR = 4
    phaseG = 5
    phaseB = 0
    width = 128
    center = 127
    yInc = @height / NUM_KEYBOARD_NOTES


    chatStream.on 'message', (message) ->
      [x, y] = [message.x, message.y]
      synth.playPad(x, y)
      updateBackgroundColour(x, y)
      rawX = x * window.innerWidth
      rawY = y * window.innerHeight
