Web Audio Oscillators - Playing a Sequence of Notes

Select various notes of various lengths and they will play in sequence based upon the specified BPM.

HTML

<p>
<select id="waveType">
    <option>sine</option>
    <option>square</option>
    <option>sawtooth</option>
    <option>triangle</option>
</select> 
Note: <input type="text" id="note" size="3"> 
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"> 
<button id="playAll">Play All</button>
</p>
<table border="1" id="tblNotes">
    <thead>
        <tr>
            <td>Note</td>
            <td>Length</td>
        </tr>
    </thead>
    <tbody></tbody>
</table>
<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"...

JavaScript

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

function startNote(e) {
    var frq = notes[e.currentTarget.id], thisNote = {}, notelength = parseFloat($("#noteLength").val());
    $(e.currentTarget).attr("fill","yellow");
    
    if (frq) {
        thisNote.notelength = notelength;
        thisNote.frq = frq;
        thisNote.noteLength = $("#noteLength option:selected").text();
        $("#tblNotes tbody").append("<tr><td>"+e.currentTarget.id+"</td><td>"+thisNote.noteLength+"</td></tr>");
        arrNotes.push(thisNote);
    }
}
function stopNote(e) {
    $(e.currentTarget).attr("fill","inherit");``
    $("#note").val("");
}

function playAll(e) {
    var o, t=ctx.currentTime, arrayLength = arrNotes.length, playlength = 0, bpm = parseInt($("#bpm").val());

    for (var i = 0; i < arrayLength; i++) {
        o = ctx.createOscillator();
        // 1 second divided by number of beats per second times number of beats (length of a note)
        playlength = 1/(bpm/60) * arrNotes[i].notelength;
        console.log(arrNotes[i].notelength)
        o.type = $("#waveType").val();
        o.frequency.value = arrNotes[i].frq;
        o.start(t);
        o.stop(t + playlength);
        t += playlength;
        o.connect(ctx.destination);
    }
}
$("use").mousedown(startNote);
$("use").mouseup(stopNote);
$("#playAll").click(playAll);

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,
  ...