Return to Kroll Design home page

Flash Tutorials (with .FLA files included)

 
« Return

ActionScript 3

Play sound using ActionScript

To play a song using ActionScript 3, you can either stream it from an external file, or stream it from an .MP3 that is embedded into the .FLA and .SWF itself. This example plays a song that is embedded in the Flash file. It's from a big band CD that I purchased. Note that the code uses Flash' built-in SoundChannel class. By querying the SoundChannel's "leftPeak" property in each frame, you can determine how loud the song is at each moment, and use this data to create a fairly realistic looking graphic equalizer type of display. I created the simple graphics myself -- using filters such as glow and blur to make the graphics look more realistic. I gave the play and stop buttons a gloss effect and a few other effects to make them look more interesting. See the ActionScript below for a lot of additional comments.

Download the FLA file



var song1_sound:Sound1 = new Sound1();
equalizer_mc.barColumn1_mc.equalizerMask_mc.height = 0;
equalizer_mc.barColumn2_mc.equalizerMask_mc.height = 0;
equalizer_mc.barColumn3_mc.equalizerMask_mc.height = 0;
equalizer_mc.barColumn4_mc.equalizerMask_mc.height = 0;
var randomizer:Number;
var peakHeight:Number; 
var peakHeight1:Number; 
var peakHeight2:Number; 
var peakHeight3:Number; 
var peakHeight4:Number; 
play_btn.addEventListener(MouseEvent.CLICK, playSound);
stop_btn.addEventListener(MouseEvent.CLICK, stopSound);
// start the sound and immediately stop it, so that the user
// can decide when to truly start it, but so that the sound has done enough initializing 
// for the myChannel.leftPeak property to exist in the doInEveryFrame function:
var myChannel:SoundChannel = myChannel = song1_sound.play();
myChannel.stop(); 
// this particular song has about 2 seconds of silence at the beginning, 
// so when the user clicks the "play" button, start playing the song at an offset
// of 2 seconds (2000 milliseconds):
function playSound(myEvent:MouseEvent)
{
  myChannel = song1_sound.play(2000,0);
}
function stopSound(myEvent:MouseEvent)
{
	myChannel.stop();	
}
// In each frame, re-calculate the current volume level of the actual song,
// so that the height of the mask will be larger and reveal more red bars
// when the music is louder.
// Both stereo channels have basically the same volume level (perhaps it's actually 
// a mono song with two identical channels), so to give the illusion of 4 channels,
// just take the left channel, clone it to get four equalizer bands, and
// randomize the height of each band after loudness is allowed to determine the 
// general height, so that the height of the bands respond to loudness changes but
// are not identical in height most of the time.
// The mask has been transformed to rotate it 180 degrees, so that when it gets taller,
// it grows higher, toward the top of the computer monitor.  (In Flash, larger y values
// usually make a rectangle extend lower, so if you don't want that you have to 
// flip it around either in ActionScript or using the transform tool.
addEventListener(Event.ENTER_FRAME, doInEveryFrame, false, 0, true);
function doInEveryFrame(myEvent:Event):void 
{
	peakHeight1 = getPeakHeight();
	peakHeight2 = getPeakHeight();
	peakHeight3 = getPeakHeight();
	peakHeight4 = getPeakHeight();	
	
	equalizer_mc.barColumn1_mc.equalizerMask_mc.height = peakHeight1; 	
	equalizer_mc.barColumn2_mc.equalizerMask_mc.height = peakHeight2; 	
	equalizer_mc.barColumn3_mc.equalizerMask_mc.height = peakHeight3; 	
	equalizer_mc.barColumn4_mc.equalizerMask_mc.height = peakHeight4; 	
}
function getPeakHeight():uint 
{
	// There's nothing magical about the number "200", I just played with the number
	// a bit until it adjusted the leftPeak numbers a good amount for affecting the 
	// the mask heights as I would like:
	
	peakHeight = myChannel.leftPeak * 200;	
	
	// Calculate a random number between 0.5 and 1.5.  The Math.random() function
	// automatically generates a random number between 0 and 1, so all you 
	// have to do is add 0.5 to the result of the Math.random function:
	
	randomizer = Math.random() + 0.5;	
	
	peakHeight = peakHeight * randomizer;
	
	// Each bar is 10 pixels high, and the space between bars is 3 pixels.
	// So to simulate the look of an equalizer, round each mask height
	// to the nearest 13 pixels. In other words, you want any given bar to either
	// glow entirely or not at all, you don't want just the lower half or third of
	// a given bar to glow:
	
	peakHeight = Math.round(peakHeight/13) * 13;		
			
	return peakHeight;	
}


 
« Return


©2012 Kroll Design    info@KrollDesign.net    781.910.3694
Last modified: 12/31/1969 7:00 PM