HTML5 Bouncy-Bass Text Toy

Posted on March 20, 2011 by John Pencola

I was at a car show one time and saw a guy lay a ping-pong ball on the roof of his tricked out Mitsubishi Eclipse. When he turned up his audio system, the thumping of the subwoofers caused the ping-pong ball to hop all around the roof, sometimes as high as what looked like 8 inches. Everyone that was standing around his trophy ride that day had a grin on their face. :) So, that’s sort of the effect I was trying to emulate with this little HTML5 experiment. Enjoy!

Bouncy-Bass Text Demo (You’ll need Firefox 4 installed to experience this)

Technical Mumbo-Jumbo

- Firefox 4 for their Audio API.
- HTML5 <audio>
- CSS3 for text rotation and text-shadows.
- JavaScript, using the FFT bits from dsp.js to monitor audio playback.

Performance

Granted the browser is still in beta, but the overall performance left more to be desired. It seemed like it had something to do with memory leaks that are still to be patched up in Firefox 4. What I noticed is that if I had more that 2 text-shadow that I was manipulating through JavaScript, the responsiveness of the rendering would slow to a crawl, which lead to the audio being way out of sync. I could have gone the Canvas route, but wanted to try and pull this off with CSS3, maybe another time I’ll try that and compare performance and approach.

Further Learning

Current proposal of the Audio API by the W3C Audio Incubator Group
Firefox 4 Audio API spec

Props

- Mozilla Team
- “Hetilica Bold” Font by Diego Quintana
- “Bad Cat” by Skullbeatz

About John Pencola

Hello, my name is John Pencola. I can't get enough of exploring new technologies, discussing software principals, creating programs and having fun with interface design. I will share my experiences here and hope Liquid Language adds some useful information to the vast sea that is the web.
This entry was posted in Audio, CSS3, HTML5, JavaScript, Toys and tagged , , , , . Bookmark the permalink.
  • http://www.mindstorminteractive.com/blog steve

    Nice. This will do for the web what spinners did for automobiles. I’m at once impressed with the capabilities of the new technology, and somewhat disseminated that it’s browser specific. Not even before Html5 and CSS 3 can be completely adopted as the standard of the web, it looks like a fresh wave of browser wars is about to begin and the first battlefield is going to be audio and video embedding (mostly video due to the encoding legalities). Very cool project though.

  • http://www.johnpencola.com John Pencola

    @Steve:
    Thanks man! It was a fun little prototype and I’ll likely create a canvas version next. All the modern browsers as of this post shipped with support for audio, even IE9. To be clear, the browser specific part is simply the API into the full Audio capabilities of the browser, which Mozilla happens to have taken the lead on. The beauty of this, as we saw with video support (as you mentioned with codecs), was that it helped rapidly evolve, through competition and Open-Web minded efforts, to push it into the direction it needs to be (all indications point to the WebM format for video). So, the same positive thing will likely happen with the audio API.

    “This will do for the web what spinners did for automobiles.”
    Do you mean the full audio support in the browser? I see lots of interesting potential and capabilities that could open up. Of course with great power comes great responsibility. In fact, last week the W3C addressed this very topic by creating the W3C Audio Working Group.

    -JP