Add a sound visualizer to Adobe Flex

VIEW THE DEMO

DOWNLOAD THE SOURCE CODE

The article Create an MP3 player with Adobe Flex demonstrated how a simple MP3 player could be created with Adobe Flex. It had the basic controls you would expect a music player to have, but one thing it was missing was some sort of spectrum analyser.

This tutorial will show you how to use the free Visualization control from Ben Stucki to add a visual spectrum analyser.

Download the Visualization library from here. Extract it and then add the folder to the Flex Build Path.

Add the following attribute to the Flex Application element.

xmlns:fx="com.fusiox.ui.*"

This sets the XML namespace for the Visualization control. Now add the following element as a child of the Application element.

<fx:Visualization click="changeVisType()" id="visualisation" height="50" width="166" horizontalCenter="0" verticalCenter="-25"/>

This createsthe Visualization control. We have also set the changeVisType function to be called when the Visualization is clicked.

The Visualization has three display modes: line, wave and bars. By clicking on the Visualization, the user can chage the display type. To enable this functionality we need to create an array that holds the display types (defined as strings), and an integer that points to the current display type in the Array.

private var types:Array = new Array("line", "wave", "bars");

private var selectedType:int = 1;

The default Visualization display type is line, which is pretty boring. In the entry point function (appComplete in this case) we set the initial Visualization display type to wave (notice that this corresponds to the initial value of the selectedType variable in step 3). We also set the Visualization fill colour to something that matches our MP3 player colour scheme.

this.visualisation.setStyle("audioFillColor", 0x009dff);

this.visualisation.type = "wave";

The changeVisType function is called when the Visualization has been clicked. Here we simply increment the selectedType variable, and change the Visualization type property to the string held at the new point in the Array.

private function changeVisType():void

{

selectedType = (selectedType + 1) % this.types.length;

this.visualisation.type = this.types[selectedType];

}

The Visualization control accesses the sounds being played via the SoundMixer.computeSpectrum function. This means that it will display the spectrum of all sounds being played, and you don't have to specifically link the sounds you have loaded and played with the Visualization control. In this way the Visualization control can be dropped into any Flex application with almost no modification of the existing code required.

If you get an exception saying "A policy file is required, but the checkPolicyFile flag was not set when this media was loaded", you can set checkPolicyFile to true when loading a sound using the code below.

sound.load(new URLRequest(MP3_URL), new SoundLoaderContext(1000, true));

Return to the Tutorial Index