Topic: JS + XBM + Base64 + data: + favicon == VU meter (Page 1 of 1)

Hey Asylum inmates,

I thought you guys might enjoy this little hack.. So I maintain a javascript sound library which is JS+Flash behind the scenes, etc.. Updated it recently with Flash 9 support (and also access to waveform/EQ and left/right channel, ie. "peak" data), and was thinking, hmmm, what other dynamic things might I be able to draw in-browser with this data..

So here's a quick test of dynamically generating XBM, base64 encoding and assigning the result to a data: URL in a "shortcut icon" <link> element. I'm amused with how well this actually seems to work.. At least in Firefox and Opera, right now (no go on IE 6 or 7, possibly 8 but I'm not holding my breath): XBM test.

For the record I've fiddled with animated .GIFs before in Firefox (eg. for Flickr when we're uploading stuff with our JS+Flash-based uploadr), but I wanted to try something that allowed me to generate and update the icon dynamically. This XBM trick has worked amusingly well. You should be able to use PNG/GIF etc. also, which is pretty bad-ass - I just don't have the time/know-how to be able to generate those (yet? ) entirely in JS.

For technique, I'm generating all 256 variants (16x16 image, two bars which can be 0 to 16 pixels "tall" each) and storing the resulting data: URIs in a 2D array. Then I'll reference them eg. xbmData[leftPeak*16][rightPeak*16], where left/rightPeak are values between 0 and 1. Simple lookup, presumably a more-efficient method than generating entirely on-the-fly each time.

The player itself is a demo available with the sound player project, you can grab it from the project home page.

(Edited by Scott on 07-11-2008 18:14)

Heh, nice one.

Would be cool with more than two bars. Also, I noticed that sometimes (at least in Opera), the default favicon shows up (seems to coincide with the music "stopping", e.g. at the beginning of "All Saints - Under The Bridge").

Cool.

I have the feeling that appending a new LINK node in the HEAD at each frame is begging for memory leak. It seems cleaner to clone the LINK, and replace the original by the clone with a new href. Alas the cloning is necessary as the icon does not seem to update when only the href is changed.

Note that the base64 encoding is not necessary. You can simply use the ES3 method encodeURI(...)

xbmImages[i][j]='data:image/x-bitmap,'+encodeURI(ico.getXBM());

When calling setPageIcon() you fetch the icon xbmImages[parseInt(16*this.peakData.left)][parseInt(16*this.peakData.right)]. I believe the 16 should be replaced by 15, otherwise you'll try to fetch the 17th image when one of the peak saturates at 1.0.

Generating PNGs is ridiculously simple with Canvas now


In theory this should work in IE8 with the data: URI. It might even work in previous versions of IE as a javascript: URI

Neat; I could see it applied to new email notices, etc.

FYI doesn't seem to work with Flash 10.0.0 d525 on GNU/Linux.

Great stuff!, I've actually used your old version in a site I'm making (beeps) that's not finished or might not ever

I'll email you if it ever gets done


Edit:
Just by chance I came across a site which uses your Sound Manager:
http://scriptnode.com/lab/spacius/

(Edited by Hugh on 07-14-2008 23:43)

FWIW, I'm experimenting with Canvas and favicons. It's pretty cunning

Hopefully I'll post the result during the night, or tomorrow.

Avast! DEFENDER + JS + Canvas + favicon == DEFENDER of the favicon