7 ms·

Show HN: Harmogram, Web Audio API + Canvas (Paper.js) FFT/Harmonograph

105 points by adrianleb 14y ago

graue 14y ago
No sound in Chromium on Linux (Ubuntu). Unfortunately, that often happens when I click on these experiments, due to lack of MP3 support. There is MP3.js to get around the patent issues, if Linux support is important to you: https://github.com/devongovett/mp3.js https://github.com/devongovett/mp3.js
- jkbyc 14y ago
  it works for me: Chromium Version 22.0.1229.94 Ubuntu 12.10 (161065)
  - graue 14y ago
    Weird. That's the exact same version string in mine and I get nothing. Did you install some kind of MP3 plugin/codec to get it to work?
    - jkbyc 14y ago
      I didn't install anything specifically for this site but looking through my installed packages I now recall I had previously installed e.g.: browser-plugin-vlc chromuim-codecs-ffmpeg-extra gecko-mediaplayer
      - graue 14y ago
        chromium-codecs-ffmpeg-extra did it. Thanks! Weird that no corresponding package seems to exist for Firefox.
umaar 14y ago
Nice work! Any plans on updating the Github repo https://github.com/adrianleb/harmogram https://github.com/adrianleb/harmogram with this version? Reason I ask, I wouldn't mind contributing a feature where the user can select their own microphone input as the audio source and have the paper.js visualisation react accordingly.
mwasser 14y ago
Love it! What's the objective of the project?
- adrianleb 14y ago
  Objective was mainly to experiment with the Web Audio API, specially its analyser. Once you plug that into a 2d/3d canvas theres really a lot of room for creativity. Glad you liked it!
- deleted 14y ago
  [deleted]
n1ghtfury 14y ago
nice! looks legit - great music choices too :D
- marcelcor 14y ago
  It uses the http://shuffler.fm http://shuffler.fm API. It's the blogs that pick the music.
aioprisan 14y ago
why is it chrome only?
- FuzzyDunlop 14y ago
  the web audio API isn't implemented in anything else. Firefox uses a proprietary thing that's been deprecated.
  - zan2434 14y ago
    the web audio api seems to function well in Safari
EwanG 14y ago
Not OPs fault, but from the name I was expecting a web-based harmonica. Anything good online for doing GarageBand type things? Preferably that can be used in other projects?
xwowsersx 14y ago
More awesome web stuff today. Great job and awesome music!
FuzzyDunlop 14y ago
This is really cool. Only thing that confused me is the UI seems to have a mind of its own sometimes - songs suddenly change themselves, and the list scrolls, and I can't find my way back to where I was.
huhtenberg 14y ago
Fuck! Sorry but this experiment works only on Google Chrome. Fuck indeed.
- sergiotapia 14y ago
  I feel Chrome is going to become the next IE6. And that sucks. Then again is it Chrome's fault that Firefox and Opera don't catch up? Would love any insight on this.
  - at-fates-hands 14y ago
    I'm pretty sure Chrome still hasn't fixed the cleartype feature so embedded fonts look decent like they do in Firefox. Chrome really isn't that far ahead of FF or Opera. all three are still pretty close. The only real loser here is still IE. Their paltry developer tools and IE8's incompatibility with HTML5 has pretty much doomed it to the trash bin. Just in case you needed some benchmark facts: http://www.zdnet.com/blog/hardware/the-big-browser-benchmark-chrome-18-vs-opera-11-vs-firefox-11-vs-ie9-vs-safari-5/19418 http://www.zdnet.com/blog/hardware/the-big-browser-benchmark...
    - graue 14y ago
      Chrome has Web Audio, which is pretty far from coming to Firefox, and seems low priority[1]. That's why we keep seeing cool audio stuff posted here that's Chrome-exclusive. Firefox supports its own Audio Data API[2] which predates the W3C standard, but it's deprecated, and will never be supported by other browsers. Web Intents[3] is another cool feature in Chrome that's not even on the map for Firefox. Instead there's a "counter-proposal" called Web Activities[4] that no one outside of Mozilla is talking about (and it seems pretty dead). I still use Firefox, but the lack of leadership in these two cases is discouraging. [1] https://bugzilla.mozilla.org/show_bug.cgi?id=779297 https://bugzilla.mozilla.org/show_bug.cgi?id=779297 [2] https://wiki.mozilla.org/Audio_Data_API https://wiki.mozilla.org/Audio_Data_API [3] http://webintents.org/ http://webintents.org/ [4] https://wiki.mozilla.org/WebActivities https://wiki.mozilla.org/WebActivities
  - 14y ago
mjcohenw 14y ago
Ha! Nobody there I ever heard of.
- RaSoJo 14y ago
  Avicci, no?
mikle 14y ago
I hate stuff that auto play music full volume on opening the page. That said, looks like an interesting experiment. I'm glad that people are using the Web Audio API, hopefully the more people use it the more browsers will support it and it will be updated.
spyder 14y ago
Collection of Web Audio experiments: http://chromium.googlecode.com/svn/trunk/samples/audio/samples.html http://chromium.googlecode.com/svn/trunk/samples/audio/sampl...
notJim 14y ago
God, this is so much cooler than my holiday project :). Nice work. In terms of critique, if you're interested in that, the UI could use some work (the interactions are weird, and it's not very intuitive), but once you get past that, the visualization is awesome. The UI is also quite pretty, so I think if you fine-tuned the interaction issues, it would be fantastic.
tonetheman 14y ago
Cool cool. Needs a pause button bad... or is there one already?
- RaSoJo 14y ago
  spacebar da pause
thrownaway2424 14y ago
Really nice work. Discovered some nice music, too :) When it's on-screen is uses two whole CPUs though (one for the chrome tab, and one for Chrome's GPU-driving process) and the visualization is obviously half a beat ahead of the music. That's not your fault, but it certainly demonstrates the drawbacks of the platform.
msutherl 14y ago
Hah, nice UK bass selection! Didn't know about Damu – awesome stuff.
podrivo 14y ago
beautiful!
zan2434 14y ago
Interesting, I did something similar with http://puur.tk/better http://puur.tk/better
wolf81 14y ago
Pretty neat stuff!
rebelnz 14y ago
Very nice! It was a little 'glitchy' whilst loading but otherwise worked fine for me (Win 7/Chrome 23).

105 points by adrianleb 14y ago

graue 14y ago

No sound in Chromium on Linux (Ubuntu). Unfortunately, that often happens when I click on these experiments, due to lack of MP3 support. There is MP3.js to get around the patent issues, if Linux support is important to you: https://github.com/devongovett/mp3.js https://github.com/devongovett/mp3.js

jkbyc 14y ago
it works for me: Chromium Version 22.0.1229.94 Ubuntu 12.10 (161065)
- graue 14y ago
  Weird. That's the exact same version string in mine and I get nothing. Did you install some kind of MP3 plugin/codec to get it to work?
  - jkbyc 14y ago
    I didn't install anything specifically for this site but looking through my installed packages I now recall I had previously installed e.g.: browser-plugin-vlc chromuim-codecs-ffmpeg-extra gecko-mediaplayer
    - graue 14y ago
      chromium-codecs-ffmpeg-extra did it. Thanks! Weird that no corresponding package seems to exist for Firefox.

umaar 14y ago

Nice work! Any plans on updating the Github repo https://github.com/adrianleb/harmogram https://github.com/adrianleb/harmogram with this version? Reason I ask, I wouldn't mind contributing a feature where the user can select their own microphone input as the audio source and have the paper.js visualisation react accordingly.

mwasser 14y ago

Love it! What's the objective of the project?

adrianleb 14y ago
Objective was mainly to experiment with the Web Audio API, specially its analyser. Once you plug that into a 2d/3d canvas theres really a lot of room for creativity. Glad you liked it!
deleted 14y ago
[deleted]

n1ghtfury 14y ago

nice! looks legit - great music choices too :D

marcelcor 14y ago
It uses the http://shuffler.fm http://shuffler.fm API. It's the blogs that pick the music.

aioprisan 14y ago

why is it chrome only?

FuzzyDunlop 14y ago
the web audio API isn't implemented in anything else. Firefox uses a proprietary thing that's been deprecated.
- zan2434 14y ago
  the web audio api seems to function well in Safari

EwanG 14y ago

Not OPs fault, but from the name I was expecting a web-based harmonica. Anything good online for doing GarageBand type things? Preferably that can be used in other projects?

xwowsersx 14y ago

More awesome web stuff today. Great job and awesome music!

FuzzyDunlop 14y ago

This is really cool. Only thing that confused me is the UI seems to have a mind of its own sometimes - songs suddenly change themselves, and the list scrolls, and I can't find my way back to where I was.

huhtenberg 14y ago

Fuck! Sorry but this experiment works only on Google Chrome. Fuck indeed.

sergiotapia 14y ago
I feel Chrome is going to become the next IE6. And that sucks. Then again is it Chrome's fault that Firefox and Opera don't catch up? Would love any insight on this.
- at-fates-hands 14y ago
  I'm pretty sure Chrome still hasn't fixed the cleartype feature so embedded fonts look decent like they do in Firefox. Chrome really isn't that far ahead of FF or Opera. all three are still pretty close. The only real loser here is still IE. Their paltry developer tools and IE8's incompatibility with HTML5 has pretty much doomed it to the trash bin. Just in case you needed some benchmark facts: http://www.zdnet.com/blog/hardware/the-big-browser-benchmark-chrome-18-vs-opera-11-vs-firefox-11-vs-ie9-vs-safari-5/19418 http://www.zdnet.com/blog/hardware/the-big-browser-benchmark...
  - graue 14y ago
    Chrome has Web Audio, which is pretty far from coming to Firefox, and seems low priority[1]. That's why we keep seeing cool audio stuff posted here that's Chrome-exclusive. Firefox supports its own Audio Data API[2] which predates the W3C standard, but it's deprecated, and will never be supported by other browsers. Web Intents[3] is another cool feature in Chrome that's not even on the map for Firefox. Instead there's a "counter-proposal" called Web Activities[4] that no one outside of Mozilla is talking about (and it seems pretty dead). I still use Firefox, but the lack of leadership in these two cases is discouraging. [1] https://bugzilla.mozilla.org/show_bug.cgi?id=779297 https://bugzilla.mozilla.org/show_bug.cgi?id=779297 [2] https://wiki.mozilla.org/Audio_Data_API https://wiki.mozilla.org/Audio_Data_API [3] http://webintents.org/ http://webintents.org/ [4] https://wiki.mozilla.org/WebActivities https://wiki.mozilla.org/WebActivities
- 14y ago

mjcohenw 14y ago

Ha! Nobody there I ever heard of.

RaSoJo 14y ago
Avicci, no?

mikle 14y ago

I hate stuff that auto play music full volume on opening the page. That said, looks like an interesting experiment. I'm glad that people are using the Web Audio API, hopefully the more people use it the more browsers will support it and it will be updated.

spyder 14y ago

Collection of Web Audio experiments: http://chromium.googlecode.com/svn/trunk/samples/audio/samples.html http://chromium.googlecode.com/svn/trunk/samples/audio/sampl...

notJim 14y ago

God, this is so much cooler than my holiday project :). Nice work. In terms of critique, if you're interested in that, the UI could use some work (the interactions are weird, and it's not very intuitive), but once you get past that, the visualization is awesome. The UI is also quite pretty, so I think if you fine-tuned the interaction issues, it would be fantastic.

tonetheman 14y ago

Cool cool. Needs a pause button bad... or is there one already?

RaSoJo 14y ago
spacebar da pause

thrownaway2424 14y ago

Really nice work. Discovered some nice music, too :) When it's on-screen is uses two whole CPUs though (one for the chrome tab, and one for Chrome's GPU-driving process) and the visualization is obviously half a beat ahead of the music. That's not your fault, but it certainly demonstrates the drawbacks of the platform.

msutherl 14y ago

Hah, nice UK bass selection! Didn't know about Damu – awesome stuff.

podrivo 14y ago

beautiful!

zan2434 14y ago

Interesting, I did something similar with http://puur.tk/better http://puur.tk/better

wolf81 14y ago

Pretty neat stuff!

rebelnz 14y ago

Very nice! It was a little 'glitchy' whilst loading but otherwise worked fine for me (Win 7/Chrome 23).