A simple HTML5 keyboard synthesizer to show off the Web Audio APIs
A Pen by Stan Williams on CodePen.
A simple HTML5 keyboard synthesizer to show off the Web Audio APIs
A Pen by Stan Williams on CodePen.
<h1>HTML5 Keyboard Synthesizer</h1> | |
<p>Use your computer keyboard to play synth sounds using the awesome Web Audio APIs!</p> | |
<p>The synth is polyphonic, so you can press multiple keys to generate multiple sounds.</p> | |
<p>Hint: try press "A" ;-)</p> | |
<div> | |
<p id="show"></p> | |
</div> | |
<footer>© 2013-2014 Daniele Veneroni. Follow me on <a href="http://twitter.com/Venerons" target="_blank" alt="Twitter @Venerons" title="Twitter @Venerons">Twitter</a> or <a href="http://github.com/Venerons" target="_blank" alt="Venerons on GitHub" title="Venerons on GitHub">GitHub</a></footer> | |
<!-- /* | |
Forked and modified by Stan Williams http://stanwilliams.net http://stans-songs.com http://codepen.io/Stanssongs | |
*/ ---> |
// WEB AUDIO API CHECK | |
window.AudioContext = window.AudioContext || window.webkitAudioContext; | |
if (!AudioContext) { | |
alert("Sorry, your browser doesn't support the Web Audio APIs."); | |
throw new Error("Sorry, your browser doesn't support the Web Audio APIs. Execution Aborted."); // ABORT ALL | |
} | |
var frequencyByKey = { | |
65: 261.626, // C4 | |
87: 277.183, // C#4 | |
83: 293.665, // D4 | |
69: 311.127, // D#4 | |
68: 329.628, // E4 | |
70: 349.228, // F4 | |
84: 369.994, // F#4 | |
71: 391.995, // G4 | |
89: 415.305, // G#4 | |
72: 440.000, // A4 | |
85: 466.164, // A#4 | |
74: 493.883, // B4 | |
75: 523.251, // C5 | |
79: 554.365, // C#5 | |
76: 587.330, // D5 | |
80: 622.254 // D#5 | |
}; | |
var nameByKey = { | |
65: "C4", | |
87: "C#4", | |
83: "D4", | |
69: "D#4", | |
68: "E4", | |
70: "F4", | |
84: "F#4", | |
71: "G4", | |
89: "G#4", | |
72: "A4", | |
85: "A#4", | |
74: "B4", | |
75: "C5", | |
79: "C#5", | |
76: "D5", | |
80: "D#5" | |
}; | |
var show = document.getElementById("show"); | |
var context = new AudioContext(), | |
gain = context.createGain(), | |
nodes = []; | |
gain.gain.value = 0.5; | |
gain.connect(context.destination); | |
document.addEventListener('keydown', function (event) { | |
var alreadyPressed = false; | |
for (var i = 0; i < nodes.length; i++) { | |
if (nodes[i].code === event.keyCode) { | |
alreadyPressed = true; | |
break; | |
} | |
} | |
if (event.keyCode >= 65 && event.keyCode <= 90 && !alreadyPressed) { | |
var osc = context.createOscillator(); | |
osc.type = "square"; | |
osc.frequency.value = frequencyByKey[event.keyCode]; | |
osc.connect(gain); | |
try { | |
osc.start(0); | |
} catch (e) {} | |
nodes.push({ | |
code: event.keyCode, | |
node: osc | |
}); | |
var str = ""; | |
for (var i = 0; i < nodes.length; i++) { | |
str += nameByKey[nodes[i].code] + " "; | |
} | |
show.textContent = str; | |
} | |
}, false); | |
document.addEventListener('keyup', function (event) { | |
var garbage = []; | |
for (var i = 0; i < nodes.length; i++) { | |
if (nodes[i].code === event.keyCode) { | |
nodes[i].node.stop(0); | |
nodes[i].node.disconnect(); | |
garbage.push(i); | |
} | |
} | |
for (var i = 0; i < garbage.length; i++) { | |
nodes.splice(garbage[i], 1); | |
} | |
var str = ""; | |
for (var i = 0; i < nodes.length; i++) { | |
str += nameByKey[nodes[i].code] + " "; | |
} | |
show.textContent = str; | |
}, false); |
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300); | |
@import url(http://fonts.googleapis.com/css?family=Quicksand:400,300); | |
body { | |
font-family: 'Quicksand', 'Open Sans', 'Helvetica Neue', 'Helvetica', sans-serif; | |
font-weight: 100; | |
color: white; | |
background-color: black; | |
} | |
h1 { | |
font-weight: 100; | |
} | |
h1, p { | |
text-align: center; | |
} | |
div p { | |
color: yellow; | |
font-size: 6rem; | |
} | |
footer { | |
position: fixed; | |
bottom: 0px; | |
width: 100%; | |
text-align: center; | |
margin-bottom: 10px; | |
} | |
footer a { | |
text-decoration: none; | |
color: yellow; | |
} | |
footer a:hover { | |
text-decoration: none; | |
color: blue; | |
} |
demo is here for now : http://codepen.io/Stanssongs/pen/itvIE