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.

2009-04-30_0036

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]

<?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

/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.

 

Submit to Hacker News

[NOTE] This post has been imported to Hugo from a Wordpress blog. It may be broken, missing images, code snippets or other information.

[NOTE] updated April 29, 2009. It's 3560 days old . This article may have outdated content.