RapidWeaver FAQ - The best Flash players







Share/Bookmark


Looking for a good music player made in Flash?


Also have a look at
Music and audio for other players and informations.

Chapter 1: Themeable Music Disc player
1.1 Where to get the Themeable Music Disc player
1.2 How to set up the player (basics)
1.3 How to customize the player and its look
1.4 How to install the player on your website

Chapter 2: Sliding XML Mp3 Player
2.1 Where to get the Sliding XML Mp3 Player
2.2 How to set up the player (basics)
2.3 How to customize the player and its look
2.4 How to install the player on your website


Chapter 1: Themeable Music Disc player


Here’s an example of one of the best and most beautiful flash music player I’ve seen so far...


All the music in this player is available at Jamendo.com for free (donationware)

The
Themeable Music Disc simply looks fantastic and is really easy to use and customize.

1.1 Where to get the Themeable Music Disc player


The player is called
Themeable Music Disc and is sold here for 10$

It contains detailed instructions for what concerns the customization of the player.

(Beware: Not all you buy from that site is as easy to use and has such detailed instructions as this player!)

1.2 How to set up the player (basics)


Even if it’s a Flash player you don’t have to know anything about Flash to setup the player since everything can be set in an XML file (the name XML is scary but it’s the easiest thing in the world to use). I will be covering only the basics here which are quite self explanatory.

Once you bought the player and downloaded it you will get a folder called
themeable-music-disc-as3.zip Folder to make things easier rename the folder to music_disc1

First we will take care of the covers of the albums, then the music files and setting up the player.

Covers

1. Take the images of your album covers and resize them to 600x600px. You could also use one cover for all the songs if you want.
2. Give them easy names avoiding spaces (replace them with _ underscores), avoid special characters like è ü (replace with e u) also avoid ! ?
3. Put them in the folder called
images which you find in the music_disc1 folder.

Music files

1. Take your music files and again give them easy names avoiding spaces (replace them with _ underscores), avoid special characters like è ü (replace with e u) also avoid ! ? Remember to add the extension .mp3 at the end of the files if it’s not yet there. Maybe it's already there but hidden (ctrl+click, Get info, Name & Extension, uncheck Hide extension)
2. Put them in the folder called
music which you find in the music_disc1 folder.

Adding the files to the player

1. Open the data.xml file in TextWrangler (download for free
here) and scroll down
2. You will find a line for each song which look something like this:

    <song text="Title of song 1" src="music/filename1.mp3" selected="true" image="images/1.jpg" />
    <song text="Title of song 2" src="music/filename2.mp3" image="images/2.jpg" />
    <song text="Title of song 3" src="music/filename3.mp3" image="images/3.jpg" />




3. Replace the information you find to fit your case: Title of the song, name of the song's file and the appropriate image

selected="true" is used to define which song will be selected when the player loads
4. Once you changed the stuff save the file and the player is ready.

1.3 How to customize the player and its look


Open the
data.xml file in TextWrangler.

At the top you will find a list of all the possible options followed by the settings themselves. Really easy.

1 2

As you see all you have to do is change the
six digit color codes or increase and decrease the parameters. As an example if I wanted to reduce the width of the border surrounding the disc (discsideradius) and change the color from black to light-gray I would go where it says

disccolor = "0x000000"
discsideradius = "7"

and change it to

disccolor = "0xCCCCCC"
discsideradius = "3"

(just ignore the 0x you find in front of the six digit color code)

I would recommend you to change

discholecolor = "0x333333"

to

discholecolor = "0xtransparent"

1.4 How to install the player on your website


Once you added all your files and edited the player settings to what you think will fit your needs upload the music_disc1 folder to the root of your server using your FTP application (If you don't know what the root is or how this is done
read it here).

Note that you will always be able to change the settings again by editing data.xml file if you should ever want to do so.

Now you can either embed the player into your by using the following code:


<object type="application/x-shockwave-flash" data="http://yourdomain.com/music_disc1/disc.swf" width="600" height="550">
     <param value="http://yourdomain.com/music_disc1/disc.swf" name="movie"/>
     <param name="wmode" value="transparent">
     <param name="allowscriptaccess" value="always"/>
     <param value="direct_link=true" name="flashvars"/>
     <param name="base" value="http://yourdomain.com/music_disc1/" />
</object>




Change width and height if you want
Replace yourdomain.com with your domain


Or add the player to another page and have it opening in a
popup window.


If you want to have multiple players just follow the instructions again and replace music_disc1 with music_disc2

If you want to add multiple players to a page like when having multiple albums and want to have people choosing which album to play you could use Chapter 2 of
this page.

Chapter 2: Sliding XML Mp3 Player



If you're looking for a player which is very simple but nevertheless incredibly elegant the
Sliding XML Mp3 Player will certainly be your best choice. Here's an example:



Clicking the arrow on the top right corner of the player will get you to the albums and songs list. To me it's really beautiful!

2.1 Where to get the Sliding XML Mp3 Player


The player is called
Sliding XML Mp3 Player and is sold here for 12$.

The player contains detailed instructions for what concerns the customization of the player.

(Beware: Not all you buy from that site is as easy to use and has such detailed instructions as this player!)

2.2 How to set up the player (basics)


Even if it’s a Flash player you don’t have to know anything about Flash to setup the player since everything can be set in an XML file (the name XML is scary but it’s the easiest thing in the world to use). I will be covering only the basics here which are quite self explanatory.

Once you bought the player and downloaded it you will get a folder called
source to make things easier rename the folder to music_player1

First we will take care of the covers of the albums, then the music files and setting up the player.

Covers

1. Take the images of your album covers and resize them to 128x128px.
2. Give them easy names avoiding spaces (replace them with _ underscores), avoid special characters like è ü (replace with e u) also avoid ! ?
3. Put them in the
music_player1 folder.

Music files

1. Take your music files and again give them easy names avoiding spaces (replace them with _ underscores), avoid special characters like è ü (replace with e u) also avoid ! ? Remember to add the extension .mp3 at the end of the files if it’s not yet there. Maybe it's already there but hidden (ctrl+click, Get info, Name & Extension, uncheck Hide extension)
2. Put them in the folder called
music which you find in the music_player1 folder. You will find a folder for each album where you can drop the sings in to better organize the files. Add more albums if needed or remove.

Adding the files to the player

1. Open the
config.xml file in TextWrangler (download for free here)
2. Each album has the following lines:

<album title="Title of the album" artist="Artist name" path="Album 1" artwork="cover1.jpg">
        <song path="song1.mp3">
            <title>Title of song 1</title>
            <artist></artist>
        </song>
        <song path="song2.mp3">
            <title>Title of song 2</title>
            <artist></artist>
        </song>
        <song path="song3.mp3">
            <title>Title of song 3</title>
            <artist></artist>
        </song>
        <song path="song4.mp3">
            <title>Title of song 4</title>
            <artist></artist>
        </song>
    </album>




3. Replace the information you find to fit your case: Title of the album, Name of the artist or band, and the folder where the player finds the song files for that album (here it's the
Album 1 folder inside the music folder) and the name of the artwork image (here cover1.jpg).

For each song replace the filename (
song1.mp3) with the appropriate name. Replace the title (Title of song 1) with the song's title.

Of course you can increase or decrease the number of songs per album by increasing or decreasing the number of appropriate lines.

2.3 How to customize the player and its look


Open the
config.xml file in TextWrangler.

Change autoplay="true" to "false" if you don't want the player to start playing automatically when the page loads. It's recommended to have it set to "false" since people generally don't like autoplaying music when browsing the web.
On the same line starting_volume="50" defines the default volume of the player (percentage, 100 equals loud, 0 equals mute). I think 50-80 is ok.

2.4 How to install the player on your website


Once you added all your files and edited the player settings to what you think will fit your needs upload the music_player1 folder to the root of your server using your FTP application (If you don't know what the root is or how this is done
read it here).

Note that you will always be able to change the settings again by editing config.xml file if you should ever want to do so.

Now you can either embed the player into your by using the following code:


<object type="application/x-shockwave-flash"
data="http://yourdomain.com/music_player1/Player.swf"
width="380" height="150">
     <param value="http://yourdomain.com/music_player1/Player.swf" name="movie"/>
     <param value="#000000" name="bgcolor"/>
     <param name="allowscriptaccess" value="always"/>
     <param value="direct_link=true" name="flashvars"/>
     <param name="base" value="http://yourdomain.com/music_player1/" />
</object>




Replace yourdomain.com with your domain
Change width and height if you want


Or add the player to another page and have it opening in a
popup window.


If you want to have multiple players just follow the instructions again and replace music_player1 with music_player2


This FAQ is also discussed in my RapidWeaverFAQ.org E-Book (sample)

RapidWeaverFAQ.org - Tutorials, Tips & Tricks is made with RapidWeaver and for RapidWeaver.
It's an EBookStoreToday.com company. It's presented by Cédric Giger and hosted by HostGator.com

Thank you for visiting and supporting my website,
- Cédric -


Now share it…

Share