5 ms·

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

64 points by mrcoles 14y ago

kilovoltaire 14y ago
Awesome. Although I don't understand why you load each data URI thrice?
- mrcoles 14y ago
  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 :'(
laconian 14y ago
It gets way out of tune the farther you get from middle C.
- kevincennis 14y ago
  The pitch sounds alright to me up until the B above middle C.
- mrcoles 14y ago
  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 14y ago
    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_ 14y ago
      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 14y ago
        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 14y ago
        I just bumped up the sampling rate to 11025Hz and that seems to have helped.
medwezys 14y ago
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 14y ago
  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.
- tomrod 14y ago
  I came across the same thing. Ouch!
- mrcoles 14y ago
  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 14y ago
    Nope, still crashes the iPad.
    - mrcoles 14y ago
      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!)
jperkelens 14y ago
Crashes my chrome tab.
- mrcoles 14y ago
  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 14y ago
    Have you submitted a bug report? That's the most brutally consistent way of crashing Chrome tabs I've seen...
    - mrcoles 14y ago
      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.)
      - marquis 14y ago
        Sporadic crashes for me on 18.0.1025.151, OSX. Otherwise a nice piano, thanks.
      - vidarh 14y ago
        Linux. Chrome 17.0.963.56. Changing waveforms seems to crash it pretty consistently after at most a handful of changes. Firefox works great.
- Maxious 14y ago
  Chrome 19 seems to slow down the timers when it is not the active tab
zitterbewegung 14y ago
Here is a song I made it with. I used an apple mouse and webkit. http://soundcloud.com/joshua-herman/whatwgsong http://soundcloud.com/joshua-herman/whatwgsong
- nthitz 14y ago
  The clicking really adds to the song!
- mrcoles 14y ago
  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.
dlsym 14y ago
Love the distortion effect!
graue 14y ago
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 14y ago
  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 14y ago
    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.
vidarh 14y ago
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-music-maker.html http://retro-treasures.blogspot.co.uk/2007/11/commodore-64-m...
highfreq 14y ago
It needs an short attack ramp, to eliminate the clicking. Or it can ensure that the waveform always start at the zero crossing.
- mrcoles 14y ago
  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/audio.js#L86 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.
egiva 14y ago
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 14y ago
  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 14y ago
    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.
- roryokane 14y ago
  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.
- greenyoda 14y ago
  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).
Mpdreamz 14y ago
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!

64 points by mrcoles 14y ago

kilovoltaire 14y ago

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

mrcoles 14y ago
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 :'(

laconian 14y ago

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

kevincennis 14y ago
The pitch sounds alright to me up until the B above middle C.
mrcoles 14y ago
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 14y ago
  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_ 14y ago
    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 14y ago
      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 14y ago
        I just bumped up the sampling rate to 11025Hz and that seems to have helped.

medwezys 14y ago

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 14y ago
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.
tomrod 14y ago
I came across the same thing. Ouch!
mrcoles 14y ago
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 14y ago
  Nope, still crashes the iPad.
  - mrcoles 14y ago
    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!)

jperkelens 14y ago

Crashes my chrome tab.

mrcoles 14y ago
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 14y ago
  Have you submitted a bug report? That's the most brutally consistent way of crashing Chrome tabs I've seen...
  - mrcoles 14y ago
    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.)
    - marquis 14y ago
      Sporadic crashes for me on 18.0.1025.151, OSX. Otherwise a nice piano, thanks.
    - vidarh 14y ago
      Linux. Chrome 17.0.963.56. Changing waveforms seems to crash it pretty consistently after at most a handful of changes. Firefox works great.
Maxious 14y ago
Chrome 19 seems to slow down the timers when it is not the active tab

zitterbewegung 14y ago

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

nthitz 14y ago
The clicking really adds to the song!
mrcoles 14y ago
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.

dlsym 14y ago

Love the distortion effect!

graue 14y ago

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 14y ago
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 14y ago
  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.

vidarh 14y ago

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-music-maker.html http://retro-treasures.blogspot.co.uk/2007/11/commodore-64-m...

highfreq 14y ago

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

mrcoles 14y ago
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/audio.js#L86 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.

egiva 14y ago

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 14y ago
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 14y ago
  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.
roryokane 14y ago
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.
greenyoda 14y ago
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).

Mpdreamz 14y ago

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!