Compact Mp3 Player - tips and tricks
Introduction:
This flash mp3 player comes with a lot of features which can easily be changed using the XML file. What's nice about this mp3 player is that it automatically generates the playlist from your songs folder and it displays the song's artist and name from the ID3 tags (which you can edit with Winamp or iTunes for example).
Note - this flash mp3 player supports the basic functions of an mp3 player:
- play/pause
- next/prev
- timer/total time
- draggable volume bar
- draggable progress bar
- sound visualizer
- reads ID3 tags for song's artist and name
The sound visualizer height reacts when you drag the volume bar, based on the bit rate of your song. So for example if you move your volume to the maximum value, the visualizer will grow in size based on the songs bit rate.
Features:
1. Customize the player through the XML file.
2. Add unlimited songs in the playlist.xml file or in the folder (if you use the PHP script).
3. Customize the colors from the XML file.
4. Set the width of the player in the XML file.
5. Support for the basic functions of an mp3 player.
Folder structure:
Please navigate to the deploy folder, inside the project folder. This folder contains all the files you need to upload to your server to have the Compact Flash Mp3 Player work. Your server must support PHP if you want to use the scan.php file instead of adding the songs manually in the XML.
player/xml/settings.xml
XML configuration file - this is where you make all changes to the look and feel of your Compact Flash Mp3 Player.
player/xml/playlist.xml
Playlist XML configuration file - this is where you write the path to the songs. If you use the PHP script we provided, the PHP script will write this same XML file, keeping the same structure.
js/swfobject.js
Deconcept SWFObject is a small JavaScript file used for embedding Adobe Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible.
js/expressInstall.swf
SWFObject has full support for the Adobe Flash Player Express Install feature. Using expressinstall, your users never have to leave your site to upgrade their Flash Player.
preview.swf
This is the component swf file which is embedded in your website.
index.html
HTML document used to embed the swf file. Please check the source code to see how the variables are passed to the swf file, using any text editor such as Notepad or Textedit.
settings.xml structure:
Below you can see what each of the attributes in the XML file means:
<settings width="357"/>
Here you can define the player width.
<settings height="95"/>
Here you can define the player height.
<settings marginAround="5"/>
Here you can define the size for margins.
<settings distanceBetweenX="5"/>
Sets the distance between elements on width.
<settings distanceBetweenY="5"/>
Sets the distance between elements on height.
<autoStartPlayer value="true"/>
If true the player will start playing on init.
<autoPlay value="true"/>
If true the first song will automatically start when the player is loaded.
<loop value="true"/>
If true the playlist will loop through all the songs.
<restartList value="true"/>
If true the player goes to first/last song at the end/begining of the list.
<init_volume>50</init_volume>
Set the default volume value.
<background color="0x171716"/>
Sets the player background color.
<play_pause_button color="0xF7941E"/>
<prev_next_button color="0xE6E7E8"/>
Here you can define the colors for the play/pause and prev/next buttons.
<playlist start_song_no = "0"
bg_fill_color="0x2B2B2B"
bg_stroke_color="0xFFFFFF"
visualizer_color="0x7C5425"
visualizer_bg_color = "0x2B2B2B"
song_text_color="0xFFFFFF"/>
Set the start song, the background's fill and stroke colors for the playlist, as well as the visualizer's fill and stroke colors and the song text color.
<time_text color="0x58595B"/>
Set the total time and time counter text color.
<progress_bar height="15" color="0xffffff"/>
<download_bar color="0x383837"/>
Set the colors and height for the progress and download bars.
<volume_scrub color="0xF7941E"/>
Set the volume scrub color.
<volume_bar level_color = "0xFFFFFF" bg_color="0x383837"/>
Set the volume's back and level bars colors.
playlist.xml structure:
This xml contains the player's songs. It looks like this:
<playlist>
<folder name="artists">
<file path="songs/artists/song1.mp3"/>
<file path="songs/artists/song2.mp3"/>
<file path="songs/artists/song3.mp3"/>
</folder>
</playlist>
Self-explanatory attributes. The name attribute contains the folder's name. Each song must be inside it's own folder in the songs folder. This is done so that the PHP script can generate for example a list of artists, and each artist can have it's own album of songs.
This player only plays a single playlist, so if you want to add new songs, you will need to add them to the folder node, like the three sample songs already there.
The scan.php file scans the SONGS folder, and it sends to flash a generated XML similar to the playlist.xml file.
The folder structure needs to be as follows:
SONGS/ALBUM1/SONG1.MP3
SONGS/ALBUM1/SONG2.MP3
SONGS/ALBUM1/SONG3.MP3
Flashvars:
In the html file you can set the swf width and height, the player width (the width defined in the flashvars has priority over the width defined in the settings.xml file), the path to the files if you choose to put them in another location rather than the player folder, and the two xml files with the settings and the songs path.
var stageW = 560;
var stageH = 300;
var cacheBuster = Date.parse(new Date());
var params = {};
params.bgcolor = "#FFFFFF";
params.allowfullscreen = "true";
var flashvars = {};
flashvars.pathToFiles = "player/";
flashvars.componentWidth = 357;
flashvars.settingsPath = "xml/settings.xml";
// if you want to automatically read the information from a folder, use the php file instead
// flashvars.xmlPath = "scan.php?dir=songs";
flashvars.xmlPath = "xml/playlist.xml";
// EMBED CODE
swfobject.embedSWF("preview.swf?t="+cacheBuster, "FlabellComponent", stageW, stageH, "9.0.124", "js/expressInstall.swf", flashvars, params);
As you noticed, we use swfObject for embedding the swf file. We also use a cacheBuster, because IE usually (or should we say always) acts strange. This prevents the stage width and height from being missread.
Support:
If you need any help using the product, please contact us at support@flabell.com.
Premium membership
10 Gold Tickets Pack
Get a support ticket
127106 users
Products RSS Feed
Follow us on twitter
support@flabell.com
ant807
on 12/6/11
I'm having problems deleting songs from the playlist. I was testing various mp3s and they add just fine, however when i delete them from the songs folder on my server, the songs still play. As of right now, there are 0 songs in the folder but they still play. Is this a problem with the scan.php or the xml file? please help, thanks.
on 12/6/11
on 13/6/11
This should solve the problem.
Also, you can either scan a folder for the mp3 files, and this is done by using the scan.php file, or you can use the playlist.xml file and set the songs you want to play. You cannot use them both. So, what is your component using?
Please share a link to your player. We'll take a look at the problem and try to figure it out.
on 13/6/11
http://dsousaent.com/deploy/index.html
on 13/6/11
on 14/6/11
I entered on your webpage and the first problem I saw is that the settings.xml file is malformed:
<settings width=274"" height =82 "" marginAround = "5" distanceBetweenX = "5" distanceBetweenY = "5">the first two attribute values are not under the quotes. They should be like this:<settings width="274" height="82" marginAround = "5" distanceBetweenX = "5" distanceBetweenY = "5">The playlist.xml file is fine. But the second mp3 file is not at the path you wrote in the XML file, so it won't work. You can either remove it from the XML file or put the file in the artists folder, where you specified it should be.
If you want to use the scan.php file, you should do it on a PHP server. On your local machine it will not work, unless you've installed a PHP server. Also, the file on your server was modified because I tried to use it and I received an error. You can see for yourself if you try to access it here:
http://dsousaent.com/deploy/player/sca...
You shouldn't receive any error, like on this file:
http://dev.vuzum.com/flabell/TestCompa...
Please download our files one more time and just replace the old scan.php file with the newly downloaded one. To put it to work, you'll just need to go to your webpage's code (index.html in this case) and find these lines:
flashvars.contentXmlPath = "xml/playlist.xml";
//flashvars.contentXmlPath = "scan.php?dir=songs";
Just comment the first line and uncomment the second line:
//flashvars.contentXmlPath = "xml/playlist.xml";
flashvars.contentXmlPath = "scan.php?dir=songs";
This should do it. It will scan for the mp3 files from your songs folder.
Let me know if you have other problems with it.
aiperron
on 6/7/11
on 7/7/11
The only way would be to build the feature using ActionScript code and modifying the Flash project.
If you need our help on this, we can do it as custom work. Just send our team an email at info@vuzum.com, if you're interested.
baaska
on 14/10/11
on 17/10/11
Margaret Wosar
on 19/12/11
I chose this for the obvious volume control. Nothing worse than hitting the play button and the music blasts your eardrums and you can't find the volume adjustment.
That being said I still added instructions for the volume slider. (can you work out how it was done?)
Check it out. Lots of fun.
http://www.gdaywa.com/fun/dance/
on 20/12/11
Glad to see you happy with the component. Enjoy!
djsaf
on 26/3/12
I have recently purchased this product and would like to ask you a couple of questions.
1. The flash player always loads xml from the browser cache. I want it to load it every time from the server because i change it frequently.
2. Is it possible for the player to display only the title of the song, not the contributing artists?
on 28/3/12
Thanks for downloading the player. We hope you're enjoying it. These would be my answers to your questions:
1. You could force the browser to download the XML from the server every time, but you'll need to create a unique URL each time your doing it. In our code we're already generating the unique number:
var cacheBuster = "?t=" + Date.parse(new Date());
so you'll need to just attach to the XML URL:
flashvars.contentXmlPath = "xml/playlist.xml" + cacheBuster;
This will do it.
2. The player takes the artist name and the song name from the XML file. If they are not found that info is fetched from the ID3 metadata. Your mp3 files might have the artist name and song name encoded so you'll need to remove the artist name. You can use iTunes or other software that can edit the ID3 information.
Let us know, if there's anything else we can help with.