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
mcpucho
on 3/1/11
on 5/1/11
I responded to your email about this. I think you're trying to access the mp3 files from another server and you're getting a sandbox violation error.
Unfortunately, we don't have enough details about the problem you're experiencing and, like I asked you in the email, can you please send us a screen shot of the error?
Thank you for downloading our component.
beatgroove
on 9/5/11
Do you have fla file of this study?
on 9/5/11
ViktorNiklasson
on 12/1/11
on 12/1/11
on 13/1/11
Thanks for the interest in our expertise, but, we're sorry, we don't have an HTML 5 player. We use only Flash for building our components.
on 21/1/11
Do you know if I can write in the settings.xml so when i got a playlist it plays a random song from the playlist, also the player jumps from song to song, not like this: song 1, song 2, song 3, song 4... but like this: song 1, song 4, song 22, song 3 .... do you understand ?
on 22/1/11
We can do this as a custom work for you. Just send an email to office@vuzum.com. Our team will do any customization to any component.
on 26/1/11
If you mean to add a random button on the player we will take it in consideration for the next update.
It's not implemented right now but keep in touch and thank you for you suggestion.
And next time you want to express your opinion about the office team please choose your language better.
show all replies
sousacreations
on 11/2/11
with no luck. I have also watched your tutorials and still can't get it.
Can you please tell me how to go about getting your player to work inside of an AP DIV of an existing XHTML file of mine?
THANKS!
on 12/2/11
Thank you for downloading our player. I'll try to help you with this.
If you work with Dreamweaver you should copy the code between the "body" tags from our index.html file, in the Code view, into your webpage.
The div that you copied will be replaced by the preview.swf file when you open the webpage. So all you have to do is place that div anywhere you want on your webpage. This means, inside of another div or another table. Where you put that div, with the id="FlabellComponent", that's where the component will appear.
Of course, you'll need to include the other files from our deploy folder in your website. It would be easier to but them in the same folder as the webpage you're trying to embed the component, but if you don't want this, please adjust the paths to the files the component needs.
This means that you'll need to edit a couple of lines the JavaScript code between the "script" tags. The pathToFiles should point to the player folder. Also adjust these lines to point to the files correctly:
<script type="text/javascript" src="js/swfobject.js"></script> swfobject.embedSWF("preview.swf"+cacheBuster, attributes.id, stageW, stageH, "9.0.124", "js/expressInstall.swf", flashvars, params);This should do it. If you have trouble with this, please give me link to your webpage and I'll be able to tell you what's wrong.
Sinvertigo
on 28/2/11
on 28/2/11
on 1/3/11
Thanks for downloading our preview. It's not working on your website, because the free preview is built to work on local machine only. If uploaded to a server it will not work. You'll need to buy the component for this.
on 1/3/11
shuffle($files);line code in the scan.php file between the If statement and the echo, the generated playlist has the list of tracks randomly made.Thanks ;)
on 2/3/11
shuffle($list_of_files);
after this line:
if(sizeof($list_of_files)>0){
on 4/3/11
http://www.emotioncooking.es/bote_01.h...
I put all the files in the root directory, except the xml folder, and call the scan.php (in the root folder) to open a first level root with mp3... but don't play anithing... what I do wrong?
show all replies
David Roberts
on 10/3/11
I am using this player with iWeb. When I open the /deploy/index.html file in TextEdit, the only thing I see is the text relating to "you need flash player." There is no section to copy/paste into the HTML snippet section.
on 11/3/11
The TextEdit application renders the HTML files, by default. So it won't show the code, but the result. However, it cannot read JavaScript, so this is why you don't see the component.
Please change the Preferences for TextEdit. You'll just need the check this check box:
http://dev.vuzum.com/flabell/utils/tex...
It will open the code for the html files. After you do this, try to follow our tutorial about embedding the components:
http://www.flabell.com/blog/1829/how-t...
If it gives you any more trouble, please give us a link to your webpage. We'll try to figure what path was not set correctly or other errors.
Alex F
on 14/3/11
I just would like to PAUSE or STOP the Player, by javascript.
Basically, When the Visitor of my page click on a Simple A HREF, this send the player the PAUSE or STOP command, via Javascript.
Thanks,
Alex.
on 15/3/11
This can be done, but the project would need some changes. We could help you by doing custom work. Please contact us at office@vuzum.com and we'll implement this feature for your player.
K.Taurus
on 18/3/11
get this, I'm creating a list of songs in my web page (sort of a navigation bar) on the left pane and I want to position the mp3 player somewhere in the center.. This list of songs in the navigation bar are links referencing the actual mp3 file
Now what i want to do is, when an song is selected from the list, the compact player must play it!
on 19/3/11
Thank you for your comment.
Sure, this can be done. This player would need some customization though, to make those links communicate with it.
If you're interested, we can help you with this by doing custom work. Send us an email at office@vuzum.com and you'll have the player you need for your website.
powerongrfx
on 8/4/11
on 11/4/11
http://www.flabell.com/blog/1669/how-t...
It explains how you can do it twice, but you can do it as many times as you need, just by making the IDs different. You'll get the idea after you'll watch the tutorial.
bpass
on 11/4/11
anyway..
i set the var stageW & H .. plus also adjusted the flashvars.componentWidth & height
it fixes the choppin problem but i still need the main player to center as it seems to be moving toward the far left top..
what do i need to adjust? to do this..
on 12/4/11
http://dev.vuzum.com/flabell/TestCompa...
? I created a temporary test folder for you to check. We checked it and it worked fine. Didn't chop any part of the component and it's centered.
Do you use the same values for the stageW and flashvars.componentWidth? or the same stageH and flashvars.componentHeight? They should have the same values.
Maybe it's a CSS issue that IE8 didn't solve.
Please give us a link if you don't find a solution. We'll try to figure what the problem is.
nfxbeats
on 1/6/11
on 2/6/11
We can implement the functionality you need as custom work. If you're interested, please send our team an email with some details at info@vuzum.com.