More Fun With Sound Visualizations

Happy New Year Everyone! I hope the new year is treating you all well. I decided to start my blog posts this year by continuing from my last post from 2006. If you didn't read it, its just a simple holiday-themed mp3 player with basic waveform visualization. I decided to play around with the visualization some more with this experiment. I created a base visualization component, and then created peak, waveform, and frequency visualization components that extend it. This was really a lot of fun to work on. I haven't added any effects or bitmap filters to it yet; this was really intended to play around with the SoundMixer.computeSpectrum() method for different sound types and to experiement with FFTMode = true (Fast Fourier Transform), which returns frequency spectrum data instead of the actual waveform data. It is very cool to visually see the relation of the waveform of a particular sound to the visually represented and audible frequencies. Here's what it looks like:



Or, you can launch the experiment. All you need to do is select a sound type, and then click on the "Play Selected Button" button.

Basically, I set it up so that you can select 5 different sound types (some are low frequency, so you might not hear on regular computer speakers. others are ear-splitting high frequencies, so be sure to control the volume):

• 1000 Hz Sine Wave
• 85 Hz Sine Wave
• Pink Noise
• a frequency sweep (frequency changes from low to high - 20Hz --> 16000 Hz)
• music

You can change the number of bars on the frequency visualization and you can also change the colors of the left and right channels. As I mentioned before, I created a base visualization component that the others extend from. This component adds the event listeners that are necessary for the other visualization components. If you are wondering why I did this, it is for code reuasability. All the other components would require this, so why not create a base component so that you don't have to put this code in all of the visualization components.

BaseVisualizationComponent.as

package com.cynergysystems.controls
{
 
 import flash.events.Event;
 import flash.utils.ByteArray;
 import mx.core.UIComponent;
   
 public class BaseVisualization extends UIComponent
 {         
  protected var spectrum : ByteArray;
           
  public function BaseVisualization() {
   spectrum = new ByteArray();
   addEventListener(Event.ENTER_FRAME, drawVisualization);
  }
            
  protected function drawVisualization(e:Event):void
  {
      //abstract function -- must be implemented in subclass
  }
 }
}

In all of the subclasses of BaseVisualization component, I override the drawVisualization function to actually draw the visualization.

In the waveform visualization, I set it up to draw a series line of lines to follow the shape of the waveform defined by the result of the computeSpectrum function. In the peak visualization, I looped over all of the values for each channel in result of the computeSpectrum function, and I used the highest absolute value per channel to draw rectangles that show that peak value for each channel. When doing the frequency visualization, I used FFTMode = true on the computeSpectrum function. According to the docs, "setting this parameter to true causes the method to return a frequency spectrum instead of the raw sound wave". The docs also say that the output of the computeSpectrum function should be in the range -1.0 to 1.0. The final result looks really cool and it is very cool that you can do this from within flash, but I am confused b/c I definitely got values greater than 1.0 when using FFTMode = true. I think the highest value that I saw (through trace output) was around 1.1. I searched the internet and found some blog chatter that this was not working properly in the beta version (Flash Player 8.5), but the frequency analysis seems to be working. If you take a look at the frequency sweep sound file, you can see the value move up the frequency spectrum (left to right) as you hear the frequency increase.

I also started playing with the drawing methods of the waveform visualizations just for fun. In my source code distribution thre's a cross waveform (left channel horizontal and right channel vertical) and a solid waveform (the value below the waveform is filled, similar to an integral in calculus).

Corss Waveform:


Solid Waveform


I hope you enjoy it... I did :-)

• Launch Application
• View Source
• Download Source

If you are looking for some other good visualization components, check out Andre Michelle, Ben Stucki or check out some of the Flash visualizations at theflashblog.com. I'm sure there are others out there, but these should be a few good ones to get you started.