Client’s request:

I want an mp3 player on my website (html), a kind of player which the user can’t pause or stop the song, also I want it to work in all browsers with no problem.

After explaining to him this is not very common and urged him to think it over, he insisted and I had to do what he asked me to.

Because of the cross-browser need, I had to use Flash/Flex for this job, but I also wanted to make this as reusable as possible for other project or for distribution as a component which I think a lot will want to use.

So, the plan was a very small player 100×20 (px), white background to blend in with the website.

I didn’t want to hard code the mp3 into the file, because this client is using a CMS application and he wanted to replace the file occasionally.

Opened up flex and started writing some code.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
     xmlns:mx="http://www.adobe.com/2006/mxml"
     layout="absolute"
     width="100"
     height="20"
     creationComplete="init()"
     color="#FFFFFF"
     backgroundColor="#FFFFFF" backgroundAlpha="0.0">
     <mx:Script>
         <![CDATA[
             import mx.controls.Alert;
             import mx.messaging.Channel;

             private function init():void{
                 var flashVars:Object = Application.application.parameters;
                 var mp3FileName:String = flashVars.mp3FileName;
                 if(mp3FileName!="")
                 {
                     playMp3File(mp3FileName);
                 }
             }
             private function playMp3File(mp3:String):void{
                 var snd:Sound = new Sound(new URLRequest(mp3));
                 var channel:SoundChannel = snd.play();
             }
         ]]>
    </mx:Script>
</mx:Application>

As you can see, the entire application is about 29 lines of code.

Code explaination

1. I declared an object that excepts the parameters passed into the FlashObject in the flashVars tag.

2. Checked if the param passed in is not empty and filled a Sound class with this mp3 and whallah –> Start playing.

This is what the HTML embedding of this SWF inside the HTML looks like:

WriteFlashObj('/SoloPlayer.swf', '100px', '20px', true, 'mp3FileName={pageFileName}', 'SoloPlayer');

That’s it.

It works like a charm.

If you want the source code or the final SWF file, please contact me through the contact page of this website, I will email it to you with no problem.