A simple HTML5 keyboard synthesizer to show off the Web Audio APIs
A Pen by Stan Williams on CodePen.
Created
April 5, 2014 04:29
-
-
Save stanwmusic/9987537 to your computer and use it in GitHub Desktop.
A Pen by Stan Williams.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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 | |
| */ ---> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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; | |
| } |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
demo is here for now : http://codepen.io/Stanssongs/pen/itvIE