JS + XBM + Base64 + data: + favicon == VU meter — OZONE Asylum, home of the Mad Scientists

DHTML/Javascript

JS + XBM + Base64 + data: + favicon == VU meter

This page's ID: 30412

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Hey Asylum inmates, I thought you guys might enjoy this little hack.. So I maintain a [url=http://schillmania.com/projects/soundmanager2/]javascript sound[/url] 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): [url=http://schillmania.com/projects/soundmanager2/demo/page-player/xbm-test.html]XBM test[/url]. 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? :D) 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[leftPeak16][rightPeak16], 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. [small](Edited by [url=http://www.ozoneasylum.com/user/2276]Scott[/url] on 07-11-2008 18:14)[/small] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu