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.
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).
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!)
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'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.
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.
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:
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!
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 :'(
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.
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.)
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?
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.
