Loop Waveform Visualizer

See my Experiment on ChromeExperiments.com
Chrome’s new Web Audio API allows us to do some pretty amazing audio stuff directly in the browser. Specifically the RealtimeAnalyserNode Interface provides real-time frequency and time-domain audio analysis which allows you to display ‘graphic equalizer’ style level bar charts and waveforms of an audio source. Chrome’s drag-and-drop file handling also allows you to drag and play MP3 files from the desktop. This gives a lot of potential to build very cool realtime audio visualizations in the browser, which was previously only possible using Processing or similar.

The Loop Waveform Visualizer uses a combination of level and waveform data to produce a circular audio visualization of any MP3. Use the mouse to tilt and the mousewheel to zoom.

To run this, you need a WebGL capable machine and the latest Chrome. Also be aware that it won’t look as good when running under Windows, since Chrome’s WebGL implementation on Windows does not suport line thickness (among other issues). It works better if you use a track that has a high dynamic range (meaning the volume of the track changes a lot over time).

The current time slice is rendered in the center, then displaced outwards over time. The level determines the brightness, thickness and Z scale of the loops. The Z displacement gives a nice ‘bounce to the beat’ effect. The waveform shape is drawn into the loop which means you can almost ‘see’ the sound. As with most visualizations, there was a lot of parameter tweaking to give a nice feel. I’m very happy with the performance of this piece – on my box it’s stays pretty solid at 60FPS. This is partially due to the fact that no new 3D objects are created over time. The 160 loops are created on initialization, then have their geometry modified each frame.

I have some plans to improve this piece, including adding post-processing effects, volume sensitivity controls, auto camera movement etc. Let me know if you have any more suggestions for improvement in the comments.

Creative Commons audio sample is from “Screw Base” by Beytah. Built with Three.js. Source is accessible from the demo URL.

12 Responses

  1. Really cool,
    impressive performance!
    Shared!

  2. CacheFlowe says:

    Really, really nice. I’ve been doing live visuals in Processing for some time, and used to do them in Flash for my music web sites. I’m excited to try this out. Your visual here is top notch.

  3. [...] especially dramatic and go try it out. And if you want to find out more, he’s provided a nicely detailed write up on his blog too.Loop Waveform Visualizer by Felix Turner This entry was posted in Audio, WebGL by Val Head on [...]

  4. 29a says:

    Cool stuff, cool idea. I like it. :)

  5. @felixturner yep, will be looking into Chrome’s Web Audio API as mentioned in your site. http://t.co/DKhzsEDz

  6. [...] Loop Waveform Visualizer by Felix Turner [...]

  7. [...] example I have recently discovered is the Loop Waveform Visualiser developed by Felix Turner  a web developer and creative technologist based in Los Angeles, in January 2012. Loop Waveform [...]

  8. @richziade says:

    @aaronlammer I know. Crazy. Web only. Also: http://t.co/OCx9GwYz

  9. Irakli says:

    Hello Felix it`s so awesome.
    Can you share source code?
    p.s. Auto camera is good idea.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>