Recording piano

Hide explanation

This is an example of a playable piano keyboard. It accepts touch/mouse or qwerty keyboard input (key A = C4, key W = C#4, etc.).

The interface records the keys you're playing (hence "recording piano"), and if you want to hear it played back, press the Playback button below the piano keyboard.

During playback, you can add more content on top if you like.

In terms of the code, the interesting stuff begins with definitions of some variables that store keys pressed, released, and resolution of those events into individual "points" with start time, pitch, and duration (for the sake of playback):

var keyOns = []; // Stores keys pressed.
var keyOffs = []; // Stores keys released.
var pts = []; // Resolves presses/releases (pts stands for "points").
Loading sounds

Contact and credits

I hope you enjoyed experimenting with this example.
Feel free to get in touch if you have any questions or suggestions.

Credits

The code in this example was written by Tom Collins. Reuse of the code is welcomed, and governed by the GNU General Public License Version 3 or later. It uses code or data from the following resources.

Get Connected