Show HN: HTML5 Piano - with its own data URI synth

Don't see anyone mentioning here that you can also play the piano with the ASDF...(etc) keys on your computer's keyboard. It was way easier playing it that way, rather than clicking with the mouse. Great job!

Don't open the page with an iPad. It keeps showing js alerts non-stop and you have to kill safari to fix it :)

I'm getting no sound in Firefox 12 on Linux. On Chromium 18, this somewhat works, but with lots of clicking (not mouse clicking, audio file clicking) and distortion - it doesn't sound anything like zitterbewegung's song - and certain notes seem to randomly go dead (they stop making a sound when clicked).

Here is a song I made it with. I used an apple mouse and webkit. <a href="http://soundcloud.com/joshua-herman/whatwgsong" rel="nofollow">http://soundcloud.com/joshua-herman/whatwgsong</a>

First thing this reminded me of, especially because of the choice of sine, triangle, square or sawtooth waves and the slightly creaky sound was C64 Music Maker - an piano overlay for the C64 keyboard:<p><a href="http://retro-treasures.blogspot.co.uk/2007/11/commodore-64-music-maker.html" rel="nofollow">http://retro-treasures.blogspot.co.uk/2007/11/commodore-64-m...</a>

I created html5piano.com with pretty much the same end goal of using browser generated sounds versus static audiofiles but got sidetracked with implementing chords and sequencer and then moved on. Great to see it implemented using data uri's!

Awesome. Although I don't understand why you load each data URI thrice?

It needs an short attack ramp, to eliminate the clicking. Or it can ensure that the waveform always start at the zero crossing.

Crashes my chrome tab.

It gets way out of tune the farther you get from middle C.

Love the distortion effect!