Web Audio Oscillators - Playing Notes with Length

In this example, each note plays for a specified note length at a specified BPM. The clipping noise at the end is back though.

HTML

Wave Type: <select id="waveType">
    <option>sine</option>
    <option>square</option>
    <option>sawtooth</option>
    <option>triangle</option>
</select> 
Note Length: 
<select id="noteLength">
    <option value="4">whole</option>
    <option value="2">half</option>
    <option value="1">quarter</option>
    <option value="0.5">eighth</option>
    <option value="0.25">sixteenth</option>
</select> 
BPM: <input type="text" id="bpm" size="3" value="120">
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"s>
    <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"/>
     ...

JavaScript

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

function startNote(e) {
    console.log(e);
    var frq = notes[e.currentTarget.id], o = ctx.createOscillator(), g = ctx.createGain(),
        bpm = parseInt($("#bpm").val()), notelength = parseFloat($("#noteLength").val()), playlength = 0;
    $(e.currentTarget).attr("fill","yellow");
    o.type = $("#waveType").val();
    
    // 1 second divided by number of beats per second times number of beats (length of a note)
    playlength = 1/(bpm/60) * notelength;
    
    if (frq) {
        $("#note").val(e.currentTarget.id);
        o.frequency.value = frq;
        o.start(ctx.currentTime);
        o.stop(ctx.currentTime + playlength);
        
        g.gain.value = 1;
        o.connect(g);
        g.connect(ctx.destination);
    }
}
function stopNote(e) {
    $(e.currentTarget).attr("fill","inherit");
    $("#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,
  ...