How To Create a Flash XML Playlist Music Player

Submitted by Richard Darell59,247 Views | 85 Comments

Introduction

I have gotten quite a lot of requests on different tutorials that my visitors would like to see on the site and it’s really exciting. I just wish I had the time to keep up with you and give you all what you want. But hang in there, I will get to “that” exact tutorial you’re waiting for. I just have to take them one at a time.

This tutorial is a bit more complex than the other ones you can find on this site. Not necessarily harder, just a bit more code to pull it off.

It will cover all the steps necessary to get a working Flash XML MP3 Player for your site or blog. Necessary skills are once again basic. Software’s used are: Adobe Flash, Photoshop and a simple word processor of your choice for setting up your play list. I am using “Notes” on windows just to simplify. Also some knowledge on how to use a ftp client to upload your player and music to your server is needed.

PS: You can find a working example of the player at the bottom of this tutorial. Enjoy!

Step 1

As usual we need some graphics that will make up our player user interface. There are a million ways you can design your player and only your creativity is the limit. I have decided to take a somewhat classic way of designing my UI for this tutorial player.

What you should remember is to make several files. A file of each the buttons in their different states (i.e Hover, Press etc.) How many states you want your buttons to have is entirely up to you.

The functions this player will have is:

Play Button
Stop Button
Previous Song Button
Next Song Button
Volume Slider
Loader Bar
Information Window – Song Title, Artist Name & Time

As you can see this player has all the necessary features to make any visitor appreciate the music you put on your site (remember: using copyrighted music without permission is a crime).

Also important to remember is if you’re using the Window Glass Shine on your information window, save the shine layer separately so we can put in the labels underneath the glass for better effect.

Here is my user interface design:

Player User Interface

Step 2

Time to set up our flash document. Open a new project and use and set the following settings in “Publishing Settings…” under “File” (CTRL+Shift+F12).

Flash Tab:

Version: Flash Player 9.0
Load Order: Bottom Up
ActionScript Version: ActionScript 2.0
JPEG Quality: 100%
Audio Stream: MP3, 160kbps, Stereo (this won’t affect the quality of the sound but I like to set it anyways)
Audio Event: MP3, 160kbps, Stereo (this won’t affect the quality of the sound but I like to set it anyways)

HTML Tab:

Quality: Best

There, now our publishing settings are set and it’s time to change some document settings. Open “Document Properties” and (if using the same dimensions as me on your user interface (182+102)) set the following:

Title: “XML MP3 Player”
Dimensions: 182 (width), 102 (height)
Background Color: White (#FFFFFF) – (Optional, take what suits your interface best)
Frame Rate: 30

Step 3

Now we’re going to set up our layers for the player. This time it’s a few more than usual. We need seven (7) layers this time so go ahead and add another 6 to the list.

After doing so name your layers, top to bottom, “actions“, “shine“, “text fields“, “buttons“, “loader / progress“, “volume” and “background“. That should be the layers we are going to work with. Of course you can go ahead and add any other layers that you need to make your user interface more interactive. But for this one we only need these.

Step 4

Let’s add our background to the setup. Go to “File” -> “Import” -> “Import To Stage…“. Your image should now be present on your stage. After your background image has been added to the stage make sure you align it correctly using you “Align” tool box to your right. Enable the “To Stage” button to your farthest right and then align it. This should but the background right where it’s supposed to be.

Now you should have something looking like this:

background & Layer Setup

Step 5

Now, let’s add our little volume slider to the user interface.The first thing we have to do is to set the size of the movie clip itself that will hold our “Volume Slider”. So, let’s go ahead and create a rectangular shape using the tool box to the left. Make the rectangle fit the “Volume Bar” exactly. Should look like this (using red just to make it more visible for you. Will make it transparent later on so go ahead and use any color you like):

Volume Movie Setup

Now, select the red rectangle you just created and choose “Modify” -> “Convert To Symbol…“. Use the following title and settings:

Volume Slider - Movie Convert

Now we have our movie in the size that is needed for our “Volume Slider” to work as it is intended to. Now name (instance name) the movie clip “volume1“.

Double click the newly created movie click. We now enter the movie clips inside so we can manipulate the red rectangle along with adding our “Volume Slider”.

Select the red rectangle and once again choose “Modify” -> “Convert To Symbol“. This time use the exact same settings: Name the symbol “Slider“. We need to do this in order to be able to be able to manipulate the color of the red rectangle the way we want to. Set the instance name for our new symbol to “volBG“.

After doing this, if not already selected, select the red rectangle and go to “Properties” at the bottom of your screen. There you will find a choice named “Color” as a roll down menu. In the roll down menu choose “Alpha” and set the amount to “0%“. This will make our red rectangle transparent and won’t be in the way of our slider or make the bar look weird.

Time to add the “Volume Slider”.The little slider has been saved separately in Photoshop so we can interact with it and set the volume. While still in the movie clip let’s add the slider by importing it as usual using the “File” -> “Import” -> “Import To Stage...” procedure.

When it’s imported position it all the way to the right on your “Volume Bar” to set the volume to maximum when the player is initiated.

We need to create a movie clip out of our “Volume Slider” as well. So let’s repeat the “Modify” -> “Convert To Symbol…” and name it “Volume Controller“. Again using the same settings as we used previously. Remember, use the same layer as the red rectangle is on. No need to create a new layer. As instance name set it to “dragger“.

You should now have something looking like this:

Dragger Setup

Step 6

OK, we got our volume control graphics set up. Now it’s time to set up our loader bar/play progression bar. This will be done almost the same way so remember the “Convert To Symbol” procedure.

Alright, let’s create the loader movie to begin with. Create a 168*2 pixel bar where the loader indicator is positioned on our user interface. Here’s how it looks like on my user interface:

Now we have to convert this shape into a Movie Symbol again. Again, “Modify” -> “Convert To Symbol…“. Name it “Loader Bar” and set it to “Movie Clip“. Set the instance name to “loaderer“.

When we have done this, double click on the newly created movie clip to get inside it. In here we’re going to set up our loader bar. The bar that will indicate how much of the song is loaded. What we need to do first is to create a new layer to house our progress bar. Name the new layer “progression“. So, again create a bar (pick a color of your choice) that will represent the loader.

I have chosen a blue color for my loading progression bar. We once again have to create a movie clip out of our bar. So once again: “Modify” -> “Convert To Symbol…“. Name the symbol “Progression” and here is an important step. You have to set the focal point to top-left corner for the loading progression bar to progress from left to right when loading.

Now, make the width of your newly created progression bar movie clip to 1 pixel in the “Info” section in your toolbox to your right. Set the instance name to “loaderBar“. Now the Loading Progression Bar is all set up.

What we need to do before leaving the insides of this clip is to get rid of the main movie clip size adjuster background. So, let’s convert the background to a “Graphic” layer with the same procedure as usual. “Modify” -> “Convert To Symbol…“. Pick the “Graphic” option and name it “Loader Background”.

After converting the background graphics to “Graphic” again use the Roll Down menu in the “Properties” box found at the bottom of your screen when selecting your newly created “Graphic” symbol. Choose “Alpha” and set it to “0%” to make it transparent.

Here’s how my complete setup looks like:

Ok, now the loading progression bar is all set up. What we’re going to do now is to use the loader bar as our player head progression bar as well. Nifty right?! What we need is an indicator that will move along the progression bar as the song is being played to show where in the song we are currently located.

If you haven’t already, go back to your root, the beginning flash project layout by clicking “Scene 1“. Let us now import our 4*4 pixel player head to the stage using the usual procedure. “File” -> “Import” -> “Import To Stage…”

Alright with the player head imported, position it on the farthest left of your loader bar. After doing this we again need to convert it to a Movie Symbol to make it usable as a player head.

“Modify” -> “Convert To Symbol…“. Name it “Player Head” and pick the “Movie Clip” option. Don’t forget to set the focal point to the top left corner. Give your newly created movie clip the instance name “playHead“.

After doing all this you should have something looking like this:

Player Head Positioning

Step 7

Wow, we have come a long way already in 7 steps. All the tricky parts are now over and now we come to the more basic functions of the music player. It’s time to set up our Play, Stop, Prev and Next buttons.

When I saved the background for my player I also saved each button in it’s “inactive” state as well as “active” state separately. Let us start by importing the “Play Button” to the “buttons” layer and to the stage. I presume you know by now how to do this so I won’t go in to that again.

After importing the play button (inactive) position it right where it’s supposed to be. OK, all done. Now, let’s convert this graphic button into a “Button” symbol. Same procedure as usual. Name the button symbol “Play Btn – Inactive” and set the instance name of your newly created button symbol to “play_btn“.

Now we have our first button. Double click the button to enter the buttons different state stages. As you can see the “Up” stage is already there. What we need to do right now is to import a our play button graphics in it’s active state.

Select the “Over” frame and create a blank key frame. This is done by right clicking the empty “Over” frame and selecting “Insert Blank Keyframe“. With this done we can now import the “active” state of the button. So, import the play buttons active graphics to our newly created key frame in “Over“.

We now have a working “Play” button.

Repeat this with all the three other buttons giving them the instance names: “stop_btn“, “prev_btn” and “next_btn“.

There, our important music player buttons are all in place and you should have something looking like this. Pay attention to the “Play” button as it is in an active state. Just to show how they look in active state.

Step 8

To display “Song Title”, “Artist Name” and “Time” we need to set up some labels. This we will easily do. We are going to add three (3) dynamic text fields in the “text fields” layer with the instance names: “timeDisplay_txt“, “bandDisplay_txt” and “titleDisplay_txt“.

Remember to “embed” the font to store it in to the Flash file when published. This way the texts will look the same no matter what visitor sees it.

The aligning of the labels are entirely up to you how you want them to present the information. Just remember to drag the artist name and the song title text fields to their maximum available space as they otherwise will get cut if you have an artist name or a song title that is too long.

This is how I aligned my three labels:

Label layout

IMPORTANT: Remember that the artist name and title is only for you to see where I have positioned the different labels. Before you save and publish you player you should just make them blank.

Step 9

Nice! Now our labels are all setup as well. Just a few things remaining now before we can publish and test our new masterpiece. Now comes the easy part. Adding the “shine” layer to the player to make it more realistic in it’s appearance.

In the “shine layer”, import the shine layer to the first frame.

You can either import a PNG file with 100% opacity and then convert the shine into a “Graphic” layer and the add the “Alpha” color to it or you can just save a PNG in Photoshop that already has the opacity set to 20% or whatever shine strength you prefer.

You should now have something like this:

Shine Setup

Step 10

Now comes the heavy part. Don’t be discouraged though. I will lead you through the entire process and try to explain what it all means. It’s time for the core. The code to make our player work as intended. It’s not as complicated as it looks so just stick with me.

In the first frame of our “actions” layer add this all this code explained underneath. You open the “actions” window by either right clicking on the first frame in our “actions” and choose “Actions” at the bottom of the list or you can just press “F9“The full code will be presented in the end. I just want to go through the parts of it so you understand what the code does.

stop();
playlist = new XML();
playlist.ignoreWhite = true;
playlist.onLoad = function(success) {
if (success) {
_global.songname = [];
_global.songband = [];
_global.songfile = [];
for (var i = 0; i<playlist.firstChild.childNodes.length; i++) {
_global.songname[i] = playlist.firstChild.childNodes[i].attributes.name;
_global.songband[i] = playlist.firstChild.childNodes[i].attributes.band;
_global.songfile[i] = playlist.firstChild.childNodes[i].attributes.file;
//trace(songname[i]+” “+songfile[i]+” “+songband[i]);
}
}
_root.createEmptyMovieClip(“sound_mc”, 1);
_global.song_nr = random(songfile.length);
//_root.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]);
};

OK, lot of code here. No worries. I am going to explain the main parts of it.

Line 1 – Just makes sure that our flash movie doesn’t loop and re-setup our player. Instead it stops and waits for us to interact with the player, such as pressing the play button.

Line 2 – Creates a variable for our play list later created in an XML file.

Line 3 – Will simply ignore any line breaks in our play list to make sure it’s read from top to bottom correctly.

Line 4 through 12 – scans out play list for the information such as Song Title, Artist Name and File and puts them in variables later accessible for our player when pressing the Play button.

Line 13 – sets up our sound channel. Opens it if you will.

Line 14 – randomizes the place where the player starts playing in the play list.

Line 15 – As you can see I have two slashes in front of the line. This is because if we didn’t the player would start playing automatically as soon as it’s loaded. If you want this function just take off the two slashes and you player is all setup to start playing as soon as it loads.

Line 16 – Closes the function.

There, let’s move to the next part of the script.

function timer(sound_obj) {
time = sound_obj.position/1000;
min = Math.floor(time/60);
min = (min<10) ? “0″+min : min;
sec = Math.floor(time%60);
sec = (sec<10) ? “0″+sec : sec;
timeDisplay_txt.text = min+”:”+sec;
}

This function is all for the timer of the player. Showing how much of the song that has been played. Let’s go through the code.

Line 1 – Opens up the timer procedure of the sound channel allowing us to keep track of where the player head is located.

Line 2 – Creates a variable holding the total length of the song.

Line 3 – Calculates the number of minutes that has passed.

Line 4 – If total amount of minutes are less than 10 we add a zero in front of the number to keep our layout the same.

Line 5 – Calculates the number of seconds that has passed.

Line 6 – If total amount of seconds are less than 10 we add a zero in front of the number to keep our layout the same.

Line 7 – Sends and prints our result to our “timeDisplay_txt” instance label.

Line 8 – Closing our function.

Now our timer is all set up and it’s time to move on over to the part that actually handles the play operation. This includes the sound channel setup and our volume control.

MovieClip.prototype.songStarter = function(file, name, band) {
if (this.sound_obj) {
this.sound_obj.stop();
delete this.sound_obj;
}
this.sound_obj = new Sound(this);
this.sound_obj.loadSound(file, true);
this.onEnterFrame = function() {
if (this.sound_obj.position>0) {
delete this.onEnterFrame;
this._parent.titleDisplay_txt.text = “‘”+name+”‘”;
this._parent.bandDisplay_txt.text = band;
this._parent.timeDisplay_txt.text = “00:00″;
timeInterval = setInterval(timer, 1000, this.sound_obj);
} else {
this._parent.bandDisplay_txt.text = “Loading…”;
}
};
this.sound_obj.onSoundComplete = function() {
clearInterval(timeInterval);
this._parent.timeDisplay_txt.text = “00:00″;
(song_nr == songfile.length-1) ? _global.song_nr=0 : _global.song_nr++;
_root.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]);
};
this._parent.volume1.dragger.onPress = function() {
startDrag(this, true, 1, this._y, this._parent.volBG._width-10, this._y);
this.onEnterFrame = function() {
var p = (this._x/this._parent.volBG._width)*100;
this._parent._parent.sound_mc.sound_obj.setVolume(p);
};
};
this._parent.volume1.dragger.onRelease = function() {
delete this.onEnterFrame;
stopDrag();
};
this._parent.volume1.dragger.onReleaseOutside = function() {
stopDrag();
};
};

This time it’s a lot of code. Again, no worries. It’s all pretty straight forward.

Line 1 – Opens up our songStarter function. Starts it off.

Line 2 through 5 – Checks if something is currently playing. If it is, then that object is stopped and deleted.

Line 6 – Creates a new sound channel for our song.

Line 7 – Loads the file currently in line in our play list.

Line 8 – Opens up a “This Frame” function. Meaning whenever our flash movie enters this frame this function will be executed.

Line 9 through 10 – Checking if the position of the player head is larger than 0. If it is it’s deleted.

Line 11 through 13 – Resets all the labels and the timer to blank and zero.

Line 14 – Resetting the timer interval.

Line 15 through 17 – If labels and timer already is reset “Loading…” is printed out to our bandDisplay label.

Line 18 – Function closed.

Line 19 – Opens up a new function. This function handles the “next” track when the current track has been played to the end and is completed.

Line 20 – Resets the interval.

Line 21 – Resets the “Timer” label to “00:00″.

Line 22 – Adds one to the play list counter location and progresses to the next track in the play list.

Line 23 – Locates, loads and starts the next track in the play list.

Line 24 – Function closed.

Line 25 – Opens up volume dragger function – The onPress function.

Line 26 – Checks the newest position of the volume dragger.

Line 27 – Opens up an onEnter Frame function to locate the dragger at initialization.

Line 28 – Sets the minimum and maximum “x” limits of our volume dragger.

Line 29 – Sets the volume according to the location of the volume dragger.

Line 30 – Function (volume onPress) closed.

Line 31 – Function (SoundComplete) closed.

Line 32 – Opens a onRelease function for the volume dragger.

Line 33 – Resets the dragger on Frame enter.

Line 34 – Stops dragging.

Line 35 – Function closed.

Line 36 – Opens an (outside release) onRelease function.

Line 37 – Stops dragging.

Line 38 – Function closed.

Line 39 – Main function (songStarter) closed.

A lot of code there huh? But it wasn’t that hard was it? On to the code that handles the loader bar and the progression indicator. This part is somewhat easier and not so complex.

setInterval(soundStatus,100);
function soundStatus(){
var amountLoaded = _root.sound_mc.sound_obj.getBytesLoaded() / _root.sound_mc.sound_obj.getBytesTotal();
_root.loaderer.loaderBar._width = amountLoaded * 168;
duration = _root.sound_mc.sound_obj.duration;
position = _root.sound_mc.sound_obj.position;
_root.playHead._x = position / duration * 165+6;
}

Line 1 – Resets our soundStatus interval to 100.

Line 2 – Opens up a soundStatus function.

Line 3 – Creates a variable to hold the amount loaded.

Line 4 – Checks the total amount of bytes for our song file.

Line 5 – Sets total file size to be 100% of the loader bar. (168 being the total width of my loader bar)

Line 6 – A variable holding the current duration of the load.

Line 7 – A variable holding the current location of the load.

Line 8 – Sets the width of our loader bar to the current progress in percentage.

Line 9 – Function closed.

That should be it for our loader progression bar. Now let us head on to our buttons. This is the fun part actually setting up some user interaction with our player. Let’s take a button at a time.

play_btn.onRelease = function() {
clearInterval(timeInterval);
this._parent.timeDisplay_txt.text = “00:00″;
_root.playHead._x = 7;
this._parent.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]);
};

Line 1 – Opens up a “play_btn” onRelease function. This will be executed each time you press the “Play” button.

Line 2 – Resets the timeInterval variable.

Line 3 – Resets the timer label to “00:00″.

Line 4 – Brings our player head back to start position.

Line 5 – Starts the current song loaded.

Line 6 – Function closed.

Easy huh? Not much to it was it. Now our “Play” button should be working all good. On to the “Stop” button.

stop_btn.onRelease = function() {
clearInterval(timeInterval);
_root.playHead._x = 7;
this._parent.timeDisplay_txt.text = “00:00″;
this._parent.titleDisplay_txt.text = “”
this._parent.bandDisplay_txt.text = “”;
this._parent.sound_mc.sound_obj.stop();
};

Line 1 – Opens up a “stop_btn” onRelease function. This will be executed each time you press the “Stop” button.

Line 2 – Resets the timeInterval variable.

Line 3 – Brings the player head right back to it’s starting position.

Line 4 – Resets the timer label to “00:00″.

Line 5 – Resets the “Song Title” label to blank.

Line 6 – Resets the “Artist Name” label to blank.

Line 7 – Stops the current song playing on our sound channel.

Line 8 – Function closed.

That’s out “Stop” button interaction completed. Now both our “Stop” and “Play” buttons should be working as intended. Now what remains is our “Next” and “Prev” song buttons. Let’s go straight to the “Next” button code.

next_btn.onRelease = function() {
clearInterval(timeInterval);
_root.playHead._x = 7;
this._parent.bandDisplay_txt.text = “Loading…”;
this._parent.timeDisplay_txt.text = “00:00″;
(song_nr == songfile.length-1) ? _global.song_nr=0 : _global.song_nr++;
_root.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]);
};

Line 1 – Opens up a “next_btn” onRelease function. This will be executed each time you press the “Next” button.

Line 2 – Resets the timeInterval variable.

Line 3 – Brings the player head straight back to it’s start position.

Line 4 – Adds “loading…” to bandDisplay label.

Line 5 – Resets the timer label to “00:00″.

Line 6 through 7 – Gets the next Song info in the play list and starts loading it. After loading it automatically starts playing.

Line 8 – Function closed.

That should wrap up our “Next” button interaction. Now all that’s left of the button’s is the “Prev” button interaction code. Let’s do it.

prev_btn.onRelease = function() {
clearInterval(timeInterval);
_root.playHead._x = 7;
this._parent.bandDisplay_txt.text = “Loading…”;
this._parent.timeDisplay_txt.text = “00:00″;
(song_nr == 0) ? _global.song_nr=songfile.length-1 : _global.song_nr–;
_root.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]);
};

Line 1 – Opens up a “prev_btn” onRelease function. This will be executed each time you press the “Prev” button.

Line 2 – Resets the timeInterval variable.

Line 3 – Brings our player head right back to it’s starting position.

Line 4 – Adds “loading…” to our bandDisplay label.

Line 5 – Resets the timer label to “00:00″

Line 6 through 7 – Gets the previous song info on the play list and starts loading it. After loading the song will start automatically.

Line 8 – Function closed.

Well, that should be all of our button’s. The button interaction is now all completed and there is only one thing left we have to add to our code in order to make it work properly. We of course have to load our play list. Our XML file not yet created. It’s only one line so it should be really easy.

playlist.load(“playlist.xml”);

Line 1 – Basically loads our play list from the file location. If using a folder or a sub folder you can just go ahead and add the pathway for it not including the root. For example. If I am using a folder called “XML Player” my code would look like this:

playlist.load(“/XML Player/playlist.xml”);

Simple huh?

Our code is now all done and all that is left to do now is actually to create our play list and then upload the whole thing to our server.

Step 11

The last thing we’re going to do in creating our XML Mp3 Music Player is to create our XML file. This is the main part of our Player and it’s what we’ll be modifying ever once in a while to switch up music for our player. Remember, using copyrighted music without permission is a crime.

Now let us see how our play list shall be setup correctly. Open your favorite word processor and type or copy the following (accept you using your own songs). My play list is looking something like this. I am using songs from my yet unreleased album so enjoy the preview. And yes, I am also a writer/producer.

<?xml version=”1.0″ encoding=”UTF-8″?>
<songs>
<song name =”Give Her A Break” band =”Richard Darell” file=”/site player/Give Her A Break.mp3″ />
<song name =”Leavin Me Numb” band =”Richard Darell” file=”/Site Player/Leavin Me Numb.mp3″ />
<song name =”Hollywood Movie” band =”Richard Darell” file=”/Site Player/Hollywood Movie.mp3″ />
</songs>

As you can see it’s neither hard or complicated. Actually it’s very structured.

Line 1 – Tells the browser/computer that this is going to be an XML document.

Line 2 – Tells our player that this is the start of our play list.

Line 3 -

The “song name” is where you will be putting the “Song Title” for your song.
The “band” is where your “Artist Name” goes.
Finally “file” is where the location of your song will be found.

Pretty simple right? Just keep adding songs as many as you like.

Line 4 – Tells our player that this is the end of our play list.

Alright, the Music Player should now look something like this being done:

Music Player - Complete

Yeah, that should be it. Time to actually save our Flash movie and get it published before we open up our favorite FTP software to upload it to our server.

Step 12

With everything set up correctly and everything ready all that’s left to do is to save our newly created player and then publish it before we upload it.

So, save your project as “Website Player” by “File” -> “Save” or by pressing “Ctrl+S“. After saving our player let’s publish it by going to “File” -> “Publish“.

There. The final step was finally completed. Now what we have to do is to upload it to a server and test it. Don’t forget to upload your song to your chosen location.

Step 13

Alright, now when our Music Player is all created, saved, published and uploaded to our server, we need to add the HTML code to our blog/website where we want to place it.

The HTML code you will be adding anywhere of your choice is looking like this:

<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0″ width=”180″ height=”100″ id=”Website Player” align=”middle”>

<param name=”allowScriptAccess” value=”sameDomain” />

<param name=”allowFullScreen” value=”false” />

<param name=”movie” value=”/site player/Website Player.swf” />

<param name=”quality” value=”best” />

<param name=”bgcolor” value=”#ffffff” />

<embed src=”/site player/Website Player.swf” quality=”best” bgcolor=”#ffffff” width=”180″ height=”100″ name=”Website Player” align=”middle” allowScriptAccess=”sameDomain” allowFullScreen=”false” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” />

</object>

There, that should be all. Now test you player to make sure it works as intended. Here is an example of my player. Go ahead and try it out.

Working Example

Round Up

Wow, that went fast! As you can see it’s quite simple to add a complex music player to your website without too much work. I am sure you are able to create this player within an hour or so if you have a clear idea what kind of user interface you want to create.

I am also sure your visitors will enjoy a little music while they read your blog or surf your site. This player is super solid and stable so go right ahead and use it in any way you like.

I hope you have enjoyed this tutorial as much as I have enjoyed writing and creating it. There are plenty more tutorials on the site to enhance the experience for your visitors that visits your site or blog. You are more than welcome to check them out.

Now I’m off for a little break before I will hit the computer again to create another tutorial I’ve had in my mind for ages now.

Looking forward hearing from you so please comment if you have the time.

Thank you!

Popularity: 34% [?]

85 Comments »

Robert Banh said:

Dang, you code, teach, and sing! Your talent is unlimited man. Great inspiration and tutorial.