Compact Flash 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:
<player width="357"/>
Here you can define the player width. The height of the player cannot be changed from code.
<background color="0x171716"/>
Sets the player background color.
<loop value="true"/>
If true the playlist will loop through all the songs.
<autoplay value="true"/>
If true the first song will automatically start when the player is loaded.
<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 color="0xffffff"/>
<download_bar color="0x383837"/>
Set the colors for the progress and download bars.
<init_volume value="20"/>
Set the default volume value.
<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
64778 users
Products RSS Feed
Follow us on twitter
Andrei Neamtu
on 22/6/09
As you can see the palyer supports a playlist just that is not shown in the component. You can see just the current song in the visualizer. But if you want you can create a list component that on click on an item will call the player's "loadNewSong" function. But don't worry a player like this will show up on flabell. Keep in touch.
To remove the background and get fit size of player go inside the FLA and all you have to do is to:
- delete it's layer with the bacground
- move the player's movieclip at (0,0) position
- change the scene dimensions in html(inside "index.html" file) embed code:
var stageW = 357;
var stageH = 105;
- change the player width in the flash vars:
flashvars.componentWidth = 357;
- recompile and open the "index.html"
Let us know if you managed to do it.
Thanks for asking. Now all the user will know how to do it :)
on 19/3/10
how do i locate these layers you speak of?
on 22/3/10
Please download the product again cause in the deploy folder you should have an html file(index.html) where the player is embeded without any shadow box.
Andrei Potorac
on 22/6/09
I cannot say when it will be ready, but in the following months for sure. :)
somwang souksavatd
on 22/6/09
somwang souksavatd
on 22/6/09
somwang souksavatd
on 22/6/09
-var stageW = 358;
-var stageH = 106;
now i just got another trouble, the player appear and work fine when i do stanalone preview with index.html file, but after i copy embed code from index.html to my home.php it not working, even i put a full parth of file location to embed code
URL: http://localhost/music.com/home.php
<script type="text/javascript" src="http://localhost/music.com/deploy/js/swfobject.js"></script> <script type="text/javascript"> var stageW = 358; var stageH = 106; 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); </script>somwang souksavatd
on 22/6/09
Andrei Neamtu
on 22/6/09
- the way you embeded the swfobject javascript is wrong.
- you don't have to add the object tag.
- you did not write the div tag that will be overwritten by swf object
Copy and paste these to script tags inside the "head" tag of your html:
<script type="text/javascript" src="js/swfobject.js"></script> <script type="text/javascript"> // PARAMS var params = {}; params.bgcolor = "#FFFFFF"; params.allowfullscreen = "true"; // ATTRIBUTES var attributes = {}; attributes.id = 'myContent'; attributes.name = 'myContent' // JAVASCRIPT VARS var cacheBuster = Date.parse(new Date()); // stage dimensions var stageW = 357; //560; var stageH = 105;//300; // FLASH VARS 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, attributes); </script>And where you want in the "body" tag of you html write the "div".
I hope it works for you.
Dylan J
on 8/8/09
I hope this is a parameter mismatch on my part and not an inherent limitation of the player.
Width is 299 -- I don't see how this is too small...
Andrei Potorac
on 10/8/09
Jay Hollen
on 22/9/09
on 22/3/10
Please download the product again cause in the deploy folder you should have an html file(index.html) where the player is embeded without any shadow box.