Javascript Piano
Controls:
play using home row & above /
change playable keys: “,” & “.” /
shift keyboard: ← & →
Extras:
Color - c /
Demo - m /
Visual mode - 8 /
Looper - 9 /
Help - 0
loop
Controls:
play using home row & above /
change playable keys: “,” & “.” /
shift keyboard: ← & →
Extras:
Color - c /
Demo - m /
Visual mode - 8 /
Looper - 9 /
Help - 0
info
↑
This synth piano is written solely using HTML, JS, and CSS. It contains a small handful of synths with configurable decays, a looper, demo mode, visual mode, and a variety of colors. View controls by hitting the top-right button on the piano.
It doesn't use a single static audio file, instead it generates them on the fly at the byte level and then converts them to files using the data URI schema. On a similar note, it doesn't use a single image either, just CSS. You can make pretty much any kind of file with a data URI, such as a bitmap file or a favicon.
Currently iOS doesn’t support HTML5 audio well enough in the browser to make this work. So, no go on iPhone and iPad, for now.
Various people have been experimenting with audio files and data URIs for a while now. I first came across this implementation by sk89q, which was helpful in getting my audio files to work. For future projects, I will probably use an audio api, but currently it’s just firefox & chrome. For further reading, here is a good overview of the state of HTML5 audio from December 2010.
By Peter Coles / @lethys – May 16, 2012