Wednesday, August 5th, 2009
HTML5 Audio + Processing(Canvas) Experiment
<p>
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?
Related Content:
Very nice
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.
Bloat alert
Tried running this on my Pre… not bad. A little slow, but definitely still cool.
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
@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.