Wednesday, August 5th, 2009

HTML5 Audio + Processing(Canvas) Experiment

Category: Canvas, Showcase

Sebastian Deutsch has a nice new experiment that uses HTML5 audio + Processing (which uses Canvas) to visualize Twitter streams sync’d to music.

In their words:

We’ve created a litttle experiment which loads 100 tweets related to HTML5 and displays them using a javascript-based particle engine. Each particle represents a tweet – click on one of them and it’ll appear on the screen.

The original particle engine was ported from a Flex/AS3 project to javascript. We’re using processing.js for particle rendering on canvas which is a very useful graphics library created by John Resig. The music will only be played if the browser supports the audio tag. To detect if the audio or canvas feature is present we use the awesome modernizr library. We could have used a fallback solution like playing the sound via Flash. But this experiment is about HTML5 – and who needs Flash anyway?

Posted by Dion Almaer at 12:55 am

4.1 rating from 29 votes


Comments feed TrackBack URI

Very nice

Comment by RoryH — August 5, 2009

Nice effect, but for the love of god why do you “need” to use JQuery and Processing to do this? That’s nearly 80kb you could do without.

Comment by TNO — August 5, 2009

Bloat alert

Comment by Darkimmortal — August 5, 2009

Tried running this on my Pre… not bad. A little slow, but definitely still cool.

Comment by Pappy74 — August 6, 2009

This is extremely cool. I do have a bit of a worry about the possibilities of HTML5 to create ads that are unblockable, or at the very least, tough to block, and easy to change so that existing blocks don’t work anymore. Flashblock is certainly not going to be effective here, unless it’s renamed HTML5block :)
I guess the other side of it is that since IE is not going to fully support HTML5 and canvas till around 2050 (and ads would have to be made so that they support IE of course) we still have close to half a century before that becomes a real problem :D

Comment by iliad — August 6, 2009

@TNO: I bet it took you longer to complain about those 80k than it took you to download it and check out the demo. I’m reasonably sure of that, because this very page is at least 270k. And those 80k probably reduced the development time by orders of magnitude, so see if you can do better.

Comment by lmorchard — September 2, 2009

Leave a comment

You must be logged in to post a comment.