Web Audio Oscillators - Same Oscillator

This keyboard changes notes using the same oscillator. Because of this, there is an audible transition between notes.

HTML

<p>
Wave Type: 
<select id="waveType">
    <option>sine</option>
    <option>square</option>
    <option>sawtooth</option>
    <option>triangle</option>
</select> 
Note being played: <input type="text" id="note" size="3">
</p>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100%" height="100%" viewBox="-5 -5 1130 450">
  
  <defs>
    <rect id="key-white" x="0" y="0" width="20" height="120" rx="3" ry="3" stroke="black" />
    <rect id="key-black" x="0" y="0" width="14" height="80" rx="3" ry="3" stroke="black" />
  </defs>
  
  <g id="keyboard">
    <g id="ivory" fill="white">
      <use id="C0" xlink:href="#key-white" x="0" />
      <use id="D0" xlink:href="#key-white" x="20"/>
      <use id="E0" xlink:href="#key-white" x="40"/>
      <use id="F0" xlink:href="#key-white" x="60"/>
      <use id="G0" xlink:href="#key-white" x="80"/>
      <use id="A0" xlink:href="#key-white" x="100"/>
      <use id="B0" xlink:href="#key-white" x="120"/>

      <use id="C1" xlink:href="#key-white" x="140" />
      <use id="D1" xlink:href="#key-white" x="160"/>
      <use id="E1" xlink:href="#key-white" x="180"/>
      <use id="F1" xlink:href="#key-white" x="200"/>
      <use id="G1" xlink:href="#key-white" x="220"/>
      <use id="A1" xlink:href="#key-white" x="240"/>
      <use id="B1" xlink:href="#key-white" x="260"/>

      <use id="C2" xlink:href="#key-white" x="280" />
      <use id="D2" xlink:href="#key-white" x="300"/>
      <use id="E2" xlink:href="#key-white" x="320"/>
      <use id="F2" xlink:href="#key-white" x="340"/>
      <use id="G2" xlink:href="#key-white" x="360"/>
      <use id="A2" xlink:href="#key-white" x="380"/>
      <use id="B2" xlink:href="#key-white" x="400"/>

      <use id="C3" xlink:href="#key-white" x="420" />
      <use id="D3" xlink:href="#key-white" x="440"/>
      <use id="E3" xlink:href="#key-white" x="460"/>
      <use id="F3" xlink:href="#key-white" x="480"/>
      <use id="G3"...

JavaScript

// Fix up prefixing
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var ctx = new AudioContext();

var o = ctx.createOscillator();
o.type = $("#waveType").val();
console.log($("#waveType").val());
o.start(0);

var g = ctx.createGain();
g.gain.value = 0;

o.connect(g);
g.connect(ctx.destination);

function startNote(e) {
    var frq = notes[e.currentTarget.id];
    $(e.currentTarget).attr("fill","yellow");
    o.type = $("#waveType").val();
    if (frq) {
        $("#note").val(e.currentTarget.id);
        o.frequency.value = frq;
        g.gain.value = 1;
    }
}
function stopNote(e) {
    $(e.currentTarget).attr("fill","inherit");
    g.gain.value = 0;
    $("#note").val("");
}

$("use").mousedown(startNote);
$("use").mouseup(stopNote); 

var notes = {
    'C0': 16.35,
    'C#0': 17.32,
    'Db0': 17.32,
    'D0': 18.35,
    'D#0': 19.45,
    'Eb0': 19.45,
    'E0': 20.60,
    'F0': 21.83,
    'F#0': 23.12,
    'Gb0': 23.12,
    'G0': 24.50,
    'G#0': 25.96,
    'Ab0': 25.96,
    'A0': 27.50,
    'A#0': 29.14,
    'Bb0': 29.14,
    'B0': 30.87,
    'C1': 32.70,
    'C#1': 34.65,
    'Db1': 34.65,
    'D1': 36.71,
    'D#1': 38.89,
    'Eb1': 38.89,
    'E1': 41.20,
    'F1': 43.65,
    'F#1': 46.25,
    'Gb1': 46.25,
    'G1': 49.00,
    'G#1': 51.91,
    'Ab1': 51.91,
    'A1': 55.00,
    'A#1': 58.27,
    'Bb1': 58.27,
    'B1': 61.74,
    'C2': 65.41,
    'C#2': 69.30,
    'Db2': 69.30,
    'D2': 73.42,
    'D#2': 77.78,
    'Eb2': 77.78,
    'E2': 82.41,
    'F2': 87.31,
    'F#2': 92.50,
    'Gb2': 92.50,
    'G2': 98.00,
    'G#2': 103.83,
    'Ab2': 103.83,
    'A2': 110.00,
    'A#2': 116.54,
    'Bb2': 116.54,
    'B2': 123.47,
    'C3': 130.81,
    'C#3': 138.59,
    'Db3': 138.59,
    'D3': 146.83,
    'D#3': 155.56,
    'Eb3': 155.56,
    'E3': 164.81,
    'F3': 174.61,
    'F#3': 185.00,
    'Gb3': 185.00,
    'G3': 196.00,
    'G#3': 207.65,
    'Ab3': 207.65,
    'A3': 220.00,
    'A#3': 233.08,
    'Bb3': 233.08,
   ...