Demo - sound visualization with wade
Shri

Wadecinos,

I created a little demo combining a couple of things from Gio's recent blog posts It is on my web site ashatej, near the bottom, the second demo "sound visualization with Wade".

It is a rotating earth with a corona that moves with the music. If that makes no sense, then just check out the demo and it should be obvious.  Sometimes, it takes a moment to load the sound file, but it seems to work fine on firefox and chrome.

I used this tutorial for the sound code

The earth image is courtesy of solarsystemscope

The music is courtesy of syncopika

Please respect the rights of the copyright holders if you wish to reuse the images or sound. My code is free to use or resuse as you see fit.

cheers,

Shri

All 3 Comments
Gio

Really cool thing Shri!

I haven't look at the source yet, but out of curiosity... are you using a shader for those colourful bars? Could you explain in a couple of lines how it all works from a very high-level perspective?

Shri

Gio,

Glad you liked it - here it is in a nutshell:

Draw the background stuff - starry sky and your rotating globe

Create the sound stuff per the tutorial I mentioned:

  • Create a javascript script processor and attach it to the audio context
  • Create an analyser so you can get an array of signal strengths by frequency
  • Setup the onaudioprocess event on the javascript node
  • Connect it all up and play the music

Add a ring around the earth of rotated rectangles - the sprite for the rotated rectangles is simply a gradient I made in photoshop. I call these 'meters' in the code as in signal strength meters.

On the audio process event, simply update the size of the ring of meters based on the signal strength of that frequency. You  get an array of frequency signal strengths using the analyser.getByteFrequencyData() function.

The pause and play button simply use the audio context suspend() and resume() functions.

You could do a thousand other things with sound visualization. If you look on the web, there are a lot of different variations. Using a shader for the bars would be a cool idea. I just wanted to keep it quick and easy since it is only a demo.

As an aside, the wade sound functions leave a little to be desired with regard to the functionality of the web audio api.  Are there any plans to add more sound stuff in future releases ?

cheers,

Shri

 

 

Gio

Sounds very interesting. I've done some audio visualization in the past, in fact quite a lot back in the day (writing WinAmp plugin's, good old times). I have only briefly looked at it with WebAudio in recent times.

I agree, WADE's audio API is fairly limited. However the truth is that we cannot just rely on people being able to use WebAudio in their browsers just yet. We're getting there, but it's not as ubiquitous as we would like for the time being, so our API needs to reflect this and only allow a minimal set of operations that would work with or without WebAudio.

Like we did with WebGL and shaders, we'll eventually move to an API that supports more stuff when the underlying technology is more widespread - our policy is to wait for at least 75% global adoption. WebAudio is currently at 68%.

Obviously you know this because you're doing it in your demo, but for the benefit of other people reading this thread, even now you can manually access the WebAudio context from WADE and do what you like with it:

var context = wade.getWebAudioContext();
if (context)
{
    // web audio is supported, do something with it
}

Just be aware that it won't be supported everywhere, see here for details.

Post a reply
Add Attachment
Submit Reply
Login to Reply