// Fix up prefixing
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var ctx = new AudioContext();
var currentOsc, currentGain;
function startNote(e) {
var frq = notes[e.currentTarget.id], o = ctx.createOscillator(), g = ctx.createGain();
$(e.currentTarget).attr("fill","yellow");
if (currentOsc) currentOsc.stop(0);
o.type = $("#waveType").val();
if (frq) {
$("#note").val(e.currentTarget.id);
o.frequency.value = frq;
o.start(0);
currentOsc = o;
currentGain = g;
g.gain.value = 1;
o.connect(g);
g.connect(ctx.destination);
}
}
function stopNote(e) {
$(e.currentTarget).attr("fill","inherit");
currentGain.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,
'B3': 246.94,
'C4': 261.63,
'C#4': 277.18,
'Db4': 277.18,
'D4': 293.66,
'D#4': 311.13,
'Eb4': 311.13,
'E4': 329.63,
'F4': 349.23,
'F#4': 369.99,
'Gb4': 369.99,
'G4': 392.00,
'G#4': 415.30,
'Ab4': 415.30,
'A4': 440.00,
'A#4': 466.16,
'Bb4': 466.16,
'B4': 493.88,
'C5': 523.25,
'C#5': 554.37,
'Db5': 554.37,
'D5': 587.33,
'D#5': 622.25,
'Eb5': 622.25,
'E5': 659.26,
'F5': 698.46,
'F#5': 739.99,
'Gb5': 739.99,
'G5': 783.99,
'G#5': 830.61,
'Ab5': 830.61,
'A5': 880.00,
'A#5': 932.33,
'Bb5': 932.33,
'B5': 987.77,
'C6': 1046.50,
'C#6': 1108.73,
'Db6': 1108.73,
'D6': 1174.66,
'D#6': 1244.51,
'Eb6': 1244.51,
'E6': 1318.51,
'F6': 1396.91,
'F#6': 1479.98,
'Gb6': 1479.98,
'G6': 1567.98,
'G#6': 1661.22,
'Ab6': 1661.22,
'A6': 1760.00,
'A#6': 1864.66,
'Bb6': 1864.66,
'B6': 1975.53,
'C7': 2093.00,
'C#7': 2217.46,
'Db7': 2217.46,
'D7': 2349.32,
'D#7': 2489.02,
'Eb7': 2489.02,
'E7': 2637.02,
'F7': 2793.83,
'F#7': 2959.96,
'Gb7': 2959.96,
'G7': 3135.96,
'G#7': 3322.44,
'Ab7': 3322.44,
'A7': 3520.00,
'A#7': 3729.31,
'Bb7': 3729.31,
'B7': 3951.07,
'C8': 4186.01
};
<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"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"/>
<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" xlink:href="#key-white" x="500"/>
<use id="A3" xlink:href="#key-white" x="520"/>
<use id="B3" xlink:href="#key-white" x="540"/>
<use id="C4" xlink:href="#key-white" x="560" />
<use id="D4" xlink:href="#key-white" x="580"/>
<use id="E4" xlink:href="#key-white" x="600"/>
<use id="F4" xlink:href="#key-white" x="620"/>
<use id="G4" xlink:href="#key-white" x="640"/>
<use id="A4" xlink:href="#key-white" x="660"/>
<use id="B4" xlink:href="#key-white" x="680"/>
<use id="C5" xlink:href="#key-white" x="700" />
<use id="D5" xlink:href="#key-white" x="720"/>
<use id="E5" xlink:href="#key-white" x="740"/>
<use id="F5" xlink:href="#key-white" x="760"/>
<use id="G5" xlink:href="#key-white" x="780"/>
<use id="A5" xlink:href="#key-white" x="800"/>
<use id="B5" xlink:href="#key-white" x="820"/>
<use id="C6" xlink:href="#key-white" x="840" />
<use id="D6" xlink:href="#key-white" x="860"/>
<use id="E6" xlink:href="#key-white" x="880"/>
<use id="F6" xlink:href="#key-white" x="900"/>
<use id="G6" xlink:href="#key-white" x="920"/>
<use id="A6" xlink:href="#key-white" x="940"/>
<use id="B6" xlink:href="#key-white" x="960"/>
<use id="C7" xlink:href="#key-white" x="980" />
<use id="D7" xlink:href="#key-white" x="1000"/>
<use id="E7" xlink:href="#key-white" x="1020"/>
<use id="F7" xlink:href="#key-white" x="1040"/>
<use id="G7" xlink:href="#key-white" x="1060"/>
<use id="A7" xlink:href="#key-white" x="1080"/>
<use id="B7" xlink:href="#key-white" x="1100"/>
</g>
<g id="ebony" fill="black">
<use id="Db0" xlink:href="#key-black" x="13"/>
<use id="Eb0" xlink:href="#key-black" x="33"/>
<use id="Gb0" xlink:href="#key-black" x="73"/>
<use id="Ab0" xlink:href="#key-black" x="93"/>
<use id="Bb0" xlink:href="#key-black" x="113"/>
<use id="Db1" xlink:href="#key-black" x="153"/>
<use id="Eb1" xlink:href="#key-black" x="173"/>
<use id="Gb1" xlink:href="#key-black" x="213"/>
<use id="Ab1" xlink:href="#key-black" x="233"/>
<use id="Bb1" xlink:href="#key-black" x="253"/>
<use id="Db2" xlink:href="#key-black" x="293"/>
<use id="Eb2" xlink:href="#key-black" x="313"/>
<use id="Gb2" xlink:href="#key-black" x="353"/>
<use id="Ab2" xlink:href="#key-black" x="373"/>
<use id="Bb2" xlink:href="#key-black" x="393"/>
<use id="Db3" xlink:href="#key-black" x="433"/>
<use id="Eb3" xlink:href="#key-black" x="453"/>
<use id="Gb3" xlink:href="#key-black" x="493"/>
<use id="Ab3" xlink:href="#key-black" x="513"/>
<use id="Bb3" xlink:href="#key-black" x="533"/>
<use id="Db4" xlink:href="#key-black" x="573"/>
<use id="Eb4" xlink:href="#key-black" x="593"/>
<use id="Gb4" xlink:href="#key-black" x="633"/>
<use id="Ab4" xlink:href="#key-black" x="653"/>
<use id="Bb4" xlink:href="#key-black" x="673"/>
<use id="Db5" xlink:href="#key-black" x="713"/>
<use id="Eb5" xlink:href="#key-black" x="733"/>
<use id="Gb5" xlink:href="#key-black" x="773"/>
<use id="Ab5" xlink:href="#key-black" x="793"/>
<use id="Bb5" xlink:href="#key-black" x="813"/>
<use id="Db6" xlink:href="#key-black" x="853"/>
<use id="Eb6" xlink:href="#key-black" x="873"/>
<use id="Gb6" xlink:href="#key-black" x="913"/>
<use id="Ab6" xlink:href="#key-black" x="933"/>
<use id="Bb6" xlink:href="#key-black" x="953"/>
<use id="Db7" xlink:href="#key-black" x="993"/>
<use id="Eb7" xlink:href="#key-black" x="1013"/>
<use id="Gb7" xlink:href="#key-black" x="1053"/>
<use id="Ab7" xlink:href="#key-black" x="1073"/>
<use id="Bb7" xlink:href="#key-black" x="1093"/>
</g>
</g>
</svg>