Creating a MP3 player for your page

Introduction

In this tutorial we're going to show you how easy it is to insert an MP3 player on to your page. We'll add some songs and we're also going to style it to give it a nice cyan background color.

The MP3 Player on your page.

Building the Player

1. Create a new HTML page
   Create a new or open an existing HTML page and save the page.


2. Applying the extension
   Choose the  icon from the DMXzone object bar to apply the extension, the Flash MP3 Player appears.
   
   
   Flash MP3 Player Interface

3. Setting the Options
   The Name is to give the player an ID, you don't have to change it, even if you put several players on the page the names will be automatically generated so they won't have the same name.
   
   
   Then we select the Skin we desire, the skin is previewed in our interface and (after we finished setting our options) in the design view. We'll choose the iTunes-Widget Clone.
   
   
   
   We're going to change its color, the color settings vary depending on the design, feel free to play around, we'll set the color to cyan (0X00FFFF). You can see a live preview in your Dreamweaver interface.
   
   

4. Adding your MP3's
   Select the  icon to add a MP3, or  to add a complete folder of MP3's.
   
   
   Add a file
   
   
   Add a folder
   
   Use the  icon to delete a MP3 or the  to remove all the MP3's from the playlist. You can use the  and  icons to rearrange the order of your playlist.
   
   
   
   You can select the Browse… button to change the selected song.
   
   
   Edit the Song
   
   
5. Applying your settings
   We've used the following settings.
   
   
   
   We selected our favorite skin, gave it a cyan color and we added two songs.
   Press OK to apply the extension.
   
   
6. Final settings
   Select the MP3 player in your design view. Go to the property inspector below it. You can change all the settings we've set so far but we'll only change the new settings, changes in the Skin and Player Color will be displayed in our design view. First we'll change the size of the MP3 player by changing the Width from 270 to 300, the height scales proportionally, although scaling causes the quality of the preview to deteriorate a bit (it is bitmap based) the end result is will be superior as it is based on vector graphics.
   
   
   
   We'll also set the Start Volume to 80 as we like to lower the default volume of our player a bit.
   
   
   
   Then we enable the Auto Play option so that our player starts automatically.
   
   
   
   We set the Horz Align to the left. You can set it to right too. If you want to centre the player you need to put the player between paragraph tags (<p>player</p>) select the paragraph symbol above the property inspector and use the Align Center button to align the player, set the Horz Align of the player to Default if you do this.
   
   Align Center
   
   You cannot set it directly to center because the MP3 player uses a float style so it can be easily displayed to the left or right side of text. The float style has no centre option.
   
   
7. Final steps
   Save your files, upload them to your server (including the script library and mp3 files) and you are ready to go.