Audio API Visualizations - Browser based

cybero's picture

Just check this out - Audio visualizations using HTML 5 and the experimental Audio API, kindly shared by bocoup @ and put into outstanding use by nihilogic.

Not currently possible cross browser with QC.

Probably will never be.

But what about implementing that Audio API in Safari?

Currently only possible in Minefield - a pre alpha of Firefox.

Not exactly pertinent to QC at present, but just thought I'd share the exciting work being done.

Just take a look @


Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

djfil's picture
Re: Audio API Visualizations - Browser based

Amazing! I had no ideia. This will be hard to other browsers like IE.

cybero's picture
Re: Audio API Visualizations - Browser based

This will be hard to other browsers like IE

Not really, it's "simply" done with an API for HTML5 in whatever browser with an appropriate rendering engine.

IE9 is catching up really fast and will roll out [whenever] & Safari still needs to fully implement such a rich media API for HTML5 in WebKit - unless I'm very much mistaken.

Firefox [pre-alpha] has certainly taken a leap forward with this, but currently it really is bleeding edge & being a standard desktop browser feature is what awaits HTML5. [Already pretty much the mobile browsing standard - though some of us are still on plain text WAP :-)]'s picture
Re: Audio API Visualizations - Browser based

That's pretty wild for a browser! How much coding I wonder? Is it javascript talking to the Audio API and receiving some kind of structured output?

I thought .svg format is not well supported in current browsers, if it's not .svg what is doing the 'drawing' logic that gets rendered in the browser?

Anyhow nice catch, cybero. Sorry I'm just trying to shed a tear for flash as I type… haha.

cybero's picture
Re: Audio API Visualizations - Browser based

I think Flash is going to be getting a make-over sometime soonish from the "sluggish" company [their self deprecatory humour].

All the goodness is via JavaScript, & HTML5 being supporting, in this one particular pre-alpha build , of the experimental Mozilla Audio API.

This is not .SVG - :-). You are right , it is /was not well supported, never much appreciated and out trumped by Flash, (with popular consent).

SVG will probably do some sort of refit or else sadly die a natural death.

The actual drawing logic is supplied by an extension to the HTML5 specification and in particular how we can read and also, please note, write audio data [without source - wow] and represent that read / write data using the canvas element Audio API.

What I'd like - A similar audio processing library for Safari / WebKit, cross platform, as the Mozilla Audio API is meant to be, one that will run AOK on desktop Macs and other WebKit browsing devices.

BTW, my thoughts in regards of this are not to necessarily have QC running cross platform or even upon the mobile devices [that would be nice, but as has previously been exhaustively discussed elsewhere, rather unlikely], but to utilise that which will provide such an experience by drawing upon the facilities [audio / graphic] native hard & soft on the bit of kit within its WebKit HTML 5 browser.

Definitely one to point in the direction of the Safari forums :-).

HTML 5 rocks.

gtoledo3's picture
Re: Audio API Visualizations - Browser based

An app that would take a qtz file and create an app that would be able to run on other platforms is feasible with a number of patches (sprites, spheres, importers) but certain things like CI are more unlikely (though substitute filters could be done in some cases). I think, more than anything, it's a matter of time, money, and whether there is a market for it?

Maybe that one is suitable for a chip in account?

cybero's picture
Re: Audio API Visualizations - Browser based

That sounds brilliant for a cross platform QC type of presentation, but I'm really only interested in the creation of an extension to the Safari WebKit API to handle the read / write of audio data like the Mozilla experimental Audio API.

Just HTML 5 conformant browsers.

BTW - having had a chance to look afresh at how SVG is being utilised, it would look like it has far longer shelf life than the doom laden opinion expressed earlier by myself.'s picture
Re: Audio API Visualizations - Browser based

Yeah I think so. For some reason I listened to a Web conference talk by a developer turned designer about .svg and only .svg (for a whole hour, why do I do these things while I cook?!). The browsers are implementing it's features bit by bit.

It's more like a framework than a image format because it has executable code rather than a locked down set of algorithms. It just seems so perfect for the web — I can only assume it's the complexity factor and lack of good tools that has stymied its uptake. That and Adobe's ownership of animated and high-end web content. I've tried opening .svg files in AI and they often are declared incompatible and shed content if they do open. Never got to the bottom of it.