Plotting a Sound Wave in Flash AS3

I’ve always been really into wave editors. I used to make songs in Amadeus by piecing together samples from other songs. Tedious but very rewarding. In a post I made not a long time ago I detailed a little Theremin project which included some wave data visualization. In this post I”ll be going further into detail about plotting sound data.

Digital audio in it’s rawest form [PCM wave data] is a long list of numbers from 1 to -1, which represent the sound’s amplitude. Another way of thinking about this is that each number represents your speaker’s distance away from it’s rest position. At 1 the speaker is fully extended, blowing out your ears and scaring your cats, while at -1 it is fully retracted, blowing out your ears and scaring your cats. To make a meaningful visual out of this we just set up a graph where time is plotted on the horizontal axis and amplitude on the vertical. So at a really high resolution, that might look like this:
80's Oscilloscope
Okay, maybe it would look like that if you were living in the 80′s. Or if you were really into oscilloscopes. In reality with most popular songs being two to five minutes long, we’d be looking at HUGE graphs. One three minute song sampled at 44.1kHz/s comes out to be eight million samples per channel. Per channel. Since most modern music is in stereo, we’re looking at two graphs now. So how do we compress this data and view it in a meaningful way? We cheat a little. We kinda scrap the whole graph/function thing. Well kinda. Let’s say you have a window 1000 pixels wide and a sound 3 minutes long. We have to compress enough samples together in order to represent them using each pixel [about 7,938 samples per pixel]. Averaging doesn’t work because with values oscillating between -1 and 1 the mean is usually zero. We could take one sample every so often to represent an entire chunk and plot that, but that’s just resampling at a much lower resolution, which results in aliasing and all sorts of bogus stuff. Take this video for instance:

Just instead of helicopter blades not moving, it’ll be your data points. No, instead what we do is we scan every single sample and pick out the largest and the smallest numbers from the chunk, which in our case means running through every 7,938 samples and picking the biggest and smallest ones. Then we plot them on top of each other, maybe with a line connecting them. Flash gets a little slow working with lists and arrays this big, but I’m sure we’ll figure out some neat tricks to get this stuff working fast. That said, here’s a little demo. If you can figure out the song I’ll give you a million bucks. [Let it chug for a while, Flash is a slow beast]:

pcm wave data plotted in flash

pcm wave data plotted in flash

Project Source

ps – don’t cheat, guess the song before you download the source, goofball.

Tags: , , , ,

11 Responses to “Plotting a Sound Wave in Flash AS3”

  1. Thanks for sharing :)

    The Summit Projects Flash Blog has a series of articles about this too, except for FP9 (that is, without Sound.extract()). Part 5 is about drawing the actual waveform from the data: http://summitprojectsflashblog.wordpress.com/2008/08/19/wave-theory-in-actionscript-3-part-5/

  2. [...] My code blog. Schell’s rants on coding and cats. « Plotting a Sound Wave in Flash AS3 [...]

  3. Hey guys, i made visualizer based on Sound.extract() :)
    look: http://borovsky.pl/projects/own/visualizer
    [FP10 :) ]
    my mail: fl.borovsky@gmail.com

  4. Has anyone know how to convert bytearray of samples from Sound.extract
    to bytearray of mp3 file?
    I want to save editied mp3 to user’s local disk.

  5. Haven’t tried it yet myself, but I’m sure you can find some useful info like this.

  6. Borovsky, I’m getting a page load error for borovsky.pl…

  7. [...] Luckily, in Flash Player 10, Adobe introduced sound.extract();  This can take the sound object and turn it into a byteArray.  I came across an example by Thibault Imbert and of course the example worked very well to visualize a sound spectrum from a byte array – though I still wasn’t sure what each byte represented in the Flash Sound object.  And even though, the spectrum looked OK,  a comment from Schell explained that this is a false waveform and to look at his blog post. [...]

  8. Excellent stuff.

    Project source file, mxml file is missing.

    please update it.

  9. Great article Schell, I had to do some waveform drawing in Flash recently and stumbled upon your article. I decided to contribute to the topic by writing a more beginner-oriented article that’s very detailed. Here’s a link: http://www.marinbezhanov.com/web-development/14/actionscript-3-sound-extract-demystified-or-how-to-draw-a-waveform-in-flash/

    Hope it’s useful to users…

  10. cannot unzip soundwaveplotting_080926srctar.gz it asks for a finame and proper extension

  11. Looks like the filename got garbled. Put a ‘.’ between ‘src’ and ‘tar’.

Leave a Reply


Follow me on GitHub
Follow me on Google+
Follow me on Twitter
Thrilling.
EFNX is proudly powered by WordPress
Entries (RSS) and Comments (RSS).