Solo standalone mp3 player to embed in a page

Posted on Apr 29, 2009

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.

[as3]

<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

</mx:Script>

</mx:Application>

[/as3]

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:

[js]

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

[/js]

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.