

Show HN: HTML5 Piano - with its own data URI synth - mrcoles
http://mrcoles.com/piano/

======
egiva
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!

~~~
mrcoles
Thanks! I was struggling with trying to keep it super minimal looking and
letting people know how it works.

If you hit "0" or the button in the top right, it'll show a dashboard with
settings and info on how to use it. I make that minimize from full size during
page load as a vague indicator that it's hidden up there.

Also, I don't know if anyone notices the "info" link in the bottom left that
scrolls the whole page down and shows some more info?

When I get chance I'll make a quick video of using it with the looper to
perform a song.

~~~
roryokane
No, I didn't notice the “info” link. My browser window is about 1300 pixels
high, so I just saw the piano at the top and a huge expanse of whitespace
below it, and didn’t bother examining the whitespace for anything.

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

~~~
mrcoles
OK, I just updated it to not crash the ipad. As a trade off, it won't play
sound, but it will still shoot out the waveforms from the bottom of the
keyboard (so you can compute the sound in your head and imagine what it should
sound like).

~~~
notatoad
Nope, still crashes the iPad.

~~~
mrcoles
Oh dear… looks like my fix during work yesterday was too hasty. I just updated
the code, and tested it in Safari with my useragent set for an ipad. Here's
the diff:

\- var isIos = navigator.userAgent.match(/(iPhone|iPod)/i); \+ var isIos =
navigator.userAgent.match(/(iPhone|iPad)/i);

Thanks for letting me know it was still broken!

Unfortunately, as I said above, it will not play the music, but it will still
shoot out waveforms from the piano. I spent several hours experimenting with
different dataURI settings and then trying falling back to static .wav files.
The latter was the most promising, but there was still a huge lag between
calling .play() and the sound actually playing. Looks like you still have to
rely on actual "apps" to have good sound on iOS. (If someone knows otherwise,
please share!)

~~~
notatoad
I feel your pain. Getting a browser to play audio properly in iOS is pretty
much impossible, and it seems like apple has done this intentionally.

No more crash though. Cool.

------
graue
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).

~~~
mrcoles
That's very possible. It works really well on Firefox 12 on a mac. Chrome on
mac has periodic issues (the delayed loading of each keys mitigates it
somewhat)—looks like I need to do some debugging on Linux. Thanks for
reporting this.

HTML5 audio has lots of problems, but the clicking and distortion also gives
it that special pop and click sound that you wouldn't otherwise get. Future
browsers will just sound too robotic on this piano :)

Additionally, higher notes often get distorted as a result of the low sampling
rate. I just changed it to turn on "visual mode" by default (that lightning
bolt thing in the top right). You can actually see where the low sampling rate
starts to affect the resulting wave form—which is sort of fun to see.

~~~
iamgilesbowkett
re "That's very possible," anything which has happened is as possible as
possible gets.

Sorry to be that guy. This is a very cool hack.

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

~~~
mrcoles
Awesome—I think you've done the first recorded song using my piano!

There's a looper too (that 2nd button, or the 9 key—hold down to start
recording, lift up to stop recording and start playback) which can lead to
interesting songs.

------
vidarh
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:

[http://retro-
treasures.blogspot.co.uk/2007/11/commodore-64-m...](http://retro-
treasures.blogspot.co.uk/2007/11/commodore-64-music-maker.html)

------
Mpdreamz
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!

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

~~~
mrcoles
So you can hit a note again when it's already playing. I cycle through which
copy gets played each time you hit a specific key. Otherwise terrible stuff
happens :'(

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

~~~
mrcoles
Good point, I should modify my volume functions for that. The current code is
here (the wave functions live just above that in the code):

[https://github.com/mrcoles/javascript-
piano/blob/master/audi...](https://github.com/mrcoles/javascript-
piano/blob/master/audio.js#L86)

Linear fade and quadratic fade sound nice on the way out, but all start at
full volume.

------
jperkelens
Crashes my chrome tab.

~~~
mrcoles
Yeah, Chrome is meddlesome. Firefox takes whatever I throw at it, but Chrome
sometimes has periodic issues. I actually load the keys slowly in order to
decreases the chances of crashing in Chrome.

~~~
vidarh
Have you submitted a bug report? That's the most brutally consistent way of
crashing Chrome tabs I've seen...

~~~
mrcoles
Nope, reasonable suggestion though. What OS and version of Chrome are you
using? It's sporadic for me in OSX on Chrome 19.0. (Also, wtf is up with their
ridiculously high versioning? The new browser wars seem to be based on version
number.)

~~~
vidarh
Linux. Chrome 17.0.963.56. Changing waveforms seems to crash it pretty
consistently after at most a handful of changes.

Firefox works great.

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

~~~
mrcoles
Haha, yeah, because the sampling rate is super low, in order to make the data
URIs work. Turn on "visual mode" hit 8 or click on the lightning bolt, and
you'll see the visual representation of each sound—and you'll see how it
breaks because of the sample rate when it starts sounding weird.

~~~
kevincennis
Looks like your sample rate is 2048Hz. Shannon-Nyquist says that should be
plenty to represent the fundamental of your highest note (C5 at 523Hz). Even
if you're getting aliasing on some of the higher harmonics, I'd think the
tuning would still sound okay.

Any acoustics nerds that can help me understand this?

~~~
pygy_
The notes are not sine waves.

The harmonics (sines whose wave length is an integer fraction of the
fundamental) play a big role in how we perceive sounds.

~~~
kevincennis
Right. I understand what harmonics are.

I'd expect timbre to get weird from aliasing of the high harmonics, but since
all the partials within an octave above that C5 are under the Nyquist
frequency of a 2048Hz sample rate, I'm a little surprised that the pitch is
affected.

I guess there's probably some destructive interference being caused by the
aliasing though. Maybe that's what's ruining the tuning.

~~~
mrcoles
I just bumped up the sampling rate to 11025Hz and that seems to have helped.

------
dlsym
Love the distortion effect!

