Solo standalone mp3 player to embed in a page
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:Application>
[/as3]
As you can see, the entire application is about 29 lines of code.
Code explaination
-
I declared an object that excepts the parameters passed into the FlashObject in the flashVars tag.
-
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.