Play using home row & above   /

Change playable keys: “,” & “.”   /

shift keyboard: ← & →


Color - c   /

Demo - m   /

Visual mode - 8   /

Looper - 9   /

Help - 0



Spybrave Piano

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 or favicon.

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.

Well I got the idea from here which is a way too better than this.