HTML5 Canvas Piano, is a "fully" functional piano sequencer created entirely in the browser using <canvas /> and <audio/> It can play and visualize single notes and chords.
You can only control the first 2 octaves, the other two are purely visual.
Below the piano you find three rows of squares. The tiny top row is the position lane, you can click on any the blocks on this lane to skip directly to a position. The two rows below the position lane are the sequencer lanes. Clicking a block will mark it for editing, whichever note / chord you'll click next will slide into that slot. Clicking again on the block marked for editing will clear the slot.
Hall of fame.
If you've made something cool with the html5 piano and tweet the url to your creation I will hotlink you here fully credited.
Is it reliable?
To run the piano you need a modern browser, preferably Firefox 4+ or Chrome 12+. Internet explorer 9 will draw the piano but wont actually play the notes.
Author
Made by Martijn Laarman (@Mpdreamz)
License information
Code and images (Html5 logo excluded) are MIT licensed.
Samples taken from freesound.org courtesy of Tim Tapes and are licensed under:
