Adding Customizable and Controllable Website Background Music With Flash

There are several ways to add a background sound or music to a website. The most popular and common way is to embed a midi sound file as follows. But this had got two draw back. First the browser and platform need to support the file format and second, only midi format is supported where most of the sound format are Mp3.

Popular way of embedding music in website

<bgsound src="yourmusicfile.mid" loop="infinite">

I wrote a light weight flash file that loads all the configuration options from a XML configuration file and plays the music or sound that is in Mp3 format. It gives the option to play or stop the sound playback. It has 5 main parts; the flash file, the XML configuration file, the Mp3 sound file, and 2 picture files as the on play button and on stop button.

Action Script for Flash sound player

var snd:Sound = new Sound();
var channel:SoundChannel;

var PlayButton_MC:Sprite = new Sprite();
var StopButton_MC:Sprite = new Sprite();

var confLoader:URLLoader = new URLLoader();

confLoader.addEventListener(Event.COMPLETE, onConfigLoad);
confLoader.load(new URLRequest("configSound.xml"));

var SoundFile:String;
var PlayButtonImageURL:String;
var StopButtonImageURL:String;
var VolumeLevel:Number;

var PlayButtonImageLoader:Loader = new Loader();
PlayButtonImageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, PlayButtonLoaded);

var StopButtonImageLoader:Loader = new Loader();
StopButtonImageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, StopButtonLoaded);

addChild(PlayButton_MC);
addChild(StopButton_MC);

PlayButton_MC.addEventListener(MouseEvent.MOUSE_UP,playSound);
StopButton_MC.addEventListener(MouseEvent.MOUSE_UP,stopSound);

function onConfigLoad(evt:Event)
{
     try
    {
        var ConfXML:XML = new XML(confLoader.data);
		trace("xml loaded, start parsing using E4X syntax");
		SoundFile = ConfXML.soundFile;
		PlayButtonImageURL = ConfXML.imagePlay;
		StopButtonImageURL = ConfXML.imageStop;
		VolumeLevel = ConfXML.volume;
		PlayButtonImageLoader.load(new URLRequest(PlayButtonImageURL));
		StopButtonImageLoader.load(new URLRequest(StopButtonImageURL));

		snd.load(new URLRequest(SoundFile));
		channel = snd.play();

    } catch(e:Error)
    {
		//haveError = true;
        trace("Error: " + e.message);
        return;
    }

}

function PlayButtonLoaded(e:Event):void
{
	PlayButton_MC.addChild(PlayButtonImageLoader.content);
}

function StopButtonLoaded(e:Event):void
{
	StopButton_MC.addChild(StopButtonImageLoader.content);
}

function playSound(evt:MouseEvent):void{
	channel = snd.play();
	StopButton_MC.visible = true;
	PlayButton_MC.visible = false;
}

function stopSound(evt:MouseEvent):void{
	channel.stop();
	StopButton_MC.visible = false;
	PlayButton_MC.visible = true;
}

function soundCompleteHandler(e:Event):void{
	channel = snd.play();
}

Configuration File Structure

	yourmusicfilename.mp3
	PlaySoundGraphic.jpg
	StopSoundGraphic.jpg

Flash Embed Code

Download the original file here
To change the size of the flash open the fla file and change the canvas size and republish it.

Click here to see the Demo