Show HN: HTML5 Piano - with its own data URI synth | Hacker News Reader

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

mrcoles.com

64 pointsmrcoles39 comments

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!

And if you use the computer keyboard to play, you can also play chords. Unfortunately, you can only get up to the 2nd G on the computer keyboard before you run out of keys. Also, the tuning on the highest four notes seems to be off (at least when using Chrome on Windows).

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.

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.

The site mentions that in the settings/help page you get by clicking the top-right button or pressing 0. “Controls: play using home row and above …”. But it is kind of confusing that it has settings and help on the same screen, written in the same style of text, with no separation between them.

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

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

Nope, still crashes the iPad.

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

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.

Oops, yeah, I forgot to mention that. iOS is trouble with html5 audio. I tried making fallback audio files, but that was too slow, so I just deleted them. I should add back some support so it doesn't kill safari.

I came across the same thing. Ouch!

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

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.

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.

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

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.

The clicking really adds to the song!

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

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?

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 :'(

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

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

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

Crashes my chrome tab.

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.

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

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

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

Firefox works great.

Sporadic crashes for me on 18.0.1025.151, OSX. Otherwise a nice piano, thanks.

Chrome 19 seems to slow down the timers when it is not the active tab

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

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.

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?

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.

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.

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

The pitch sounds alright to me up until the B above middle C.

Love the distortion effect!

Reply on news.ycombinator.com