Flabell Flash Mp3 Player
Fully customizable MP3 Player, built with support for multiple Artists and Albums. Everything is XML customizable, including player and images size, player colors, speed and transition effects.
This Flash Mp3 Player contains a handful of features and settings. It is easy to use the player in your Flash projects or as an independent Flash Mp3 Player on your website or Myspace page. It is as easy as moving some actionscript files around, and dragging the movieclip containing the Flash Mp3 Player in your Flash file.
Skinning the Mp3 player
Skinning is very simple as well. To edit the file you don't need any Flash experience, as all the settings are loaded from an external XML file, which you can edit with any text editor. You can change the colors of the elements, the speed of the effects, the size of the images, the size of the mp3 player, add or remove features to the player, and much more.
As an example, you can disable the SHARE button in the XML file, and the control bar will automatically resize to fill the empty space on the right of the Flash Mp3 Player.
Playlists, artists and albums
The playlists are also loaded from an external XML file, so you can add unlimited artists and albums.
Audio Volume
The user can quickly turn on/off the audio, or change the volume by dragging the volume bar. The music will fade in/out between the values. When the user comes to the player again, the volume is already stored in his cache, and the mp3 player will start from the last value set by the user.
Player source code
The code is very well commented, written in ActionScript 3, following the best OOP practices, and the downloadable files come with all the assets used to create the Flash Mp3 Player such as the fonts, the PSD source files and the Flash source files.
Features:
- Streaming – starts playing before the song is fully loaded
- Seek bar for displaying song progress
- Shuffle songs
- Share Mp3 Player
- Download button with customizable link
- Buy button with customizable link
- Volume slider with cache support
- Mute button
- Customize auto-play, volume start value and display text through XML file.
- Customize playlist through XML file
- Unlimited number of albums/artists and songs
- Colors are customizable from XML
- Speed of effects customizable from XML
- Size of images customizable from XML
- Scrolling auto-start customizable from XML
Note: The songs used in this file are samples that repeat, under 30 seconds for legal reasons. You can easily update them in the XML file.
1. Is it possible to adjust the size of the player?
Yes, the player size can be changed in the HTML file. You need to edit the following variables to change the size of the swf:
stageW - swf width
stageH - swf height
2. Can I have the SWF file in a different folder than the XML files?
Yes, you can put the swf files and XML files in different folders. Make sure you edit the path to the XML files in the HTML code:
flashvars.settingsPath = "xml/settings.xml";
flashvars.xmlPath = "xml/mp3_player.xml";
3. Is this player skinnable?
Yes, the XML files that come with the mp3 player allows you to change every color of the player, including many other options.
4. Does the player support unlimited playlists and mp3 files?
Yes, you can add as many authors as you want, and each playlist can contain as many mp3 files as you need.
5. I downloaded the player, but my songs are not hearing well. What is the problem?
Adobe Flash Player 10 distorts sounds sampled higher than 44KHz. You can read more about it here: http://tinyurl.com/c9kqxy
The solution we used for our files is to re-sample all of our audio files down to 44KHz.
6. Can I open the fla and change the width of the progress bar?
We highly recommend using the XML for any edits you want to make to the file.
7. Where can I find some sample code for embedding the swf file?
Please open the index.html file, and select view > page source from the browser menu OR open the index.html file with a text editor.
8. How would I go about inserting the swf in another FLA file?
We will provide a video tutorial, and instructions in the downloadable files explaining you step by step how you can use this swf file in another fla.
9. Can you load a .php file as the xml?
Yes, you can pass a PHP file instead of the XML, as long as you respect the same structure of the XML, the PHP will work fine.
10. Are the MP3 files externally loaded?
Yes, everything is externally loaded: the mp3 files, the images, the settings for the swf.
11. What can I do if I have two Mp3 Players in the same page (but I need different files)?
Firstly you need to make sure you pass two different IDs to each of the two MP3 Players, so that you can embed the swf file twice correctly. You do not need to duplicate the swf.
In order to have different files play for each instance of the swf, you need to pass different XML files. You can pass different settings XML files too, so that the same swf can look different on the same page if you need to.
12. What files do I receive on purchase?
Please read the description of the product under the description tab to see all the files that come with the download.
13. I want to modify the player. Are you available for custom work?
Yes, at the market rate. Please contact us at [email protected]
14. Is it possible to have the movement not start automaticaly?
Yes, this is a XML parameter you can easily adjust.
15. Can I use different fonts for the player?
Yes, the steps for changing the fonts are:
- edit the FLA file
- embed the fonts
- change them in the textfield you need new fonts
- export the swf file
16. Does the player support special characters?
If the font used supports them, than the player supports them as well.
If you need to use a different font with support for special characters in your language (Chinese, Japanese), than you must embed that font in the FLA file, and replace the font used in the textfields with that font.
17. Can the player automatically read the mp3 files from a folder and generate a playlist?
No, but you can write a php file that would populate the XML used for the playlists.
18. Is the file built in AS3?
Yes, the file is built in AS3 so that it can be used in a larger number of Flash websites.
19. When I open the file it says font missing. What should I do?
Before opening the Flash file you need to install the fonts that came with the download. After that you can make the changes you need in the FLA, and the fonts won't be missing.
20. The Mp3 Player doesn't load all Artists. What did I do wrong?
Please make sure you validate your XML file in order to check for any bugs. Most probably you did something wrong in the XML, at the last artist loaded in the player.
21. Is it possible to load the mp3 files from another location?
Yes.
If you want to play the mp3 files from another server, you need to specify the absolute path to the server in the XML, for each song. For example:
http://www.vuzum.com/song.mp3
The variable flashvars.pathToFiles needs to be empty.
The pathToFiles value is added in front of the XML path, images, songs, and any other content you load inside the player.
This means you need to specify the path to your XML files in the two variables in the HTML:
flashvars.settingsPath = "PATH TO THE FOLDER CONTAINING THE XML/settings.xml";
flashvars.xmlPath = "PATH TO THE FOLDER CONTAINING THE XML/mp3_player.xml";
ON THE OTHER HAND, if you want to play the mp3 files from a different folder on YOUR server, please follow the instructions below.
In the HTML you have the following line:
flashvars.pathToFiles = "player/";
Notice there is a "/" after the name of the folder. So in this case, the XML files, the songs, and the images path will have the "player/" folder appended in front of the path defined for each ( either in the XML for the images and mp3 files, or in the HTML variables for the XML files )
So the files will be located as follows:
player/xml/mp3_player.xml
player/xml/settings.xml
player/songs/song1.mp3
player/songs/song2.mp3
player/songs/song3.mp3
player/images/Timbaland/image.jpg
...
22. How can I use the & inside the buy and download links?
If you want to use the & character, you need to replace it with it's numerical code instead, so use &
There are no video tutorials for this flash component yet.
Flash Mp3 Player - change log
2009.09.20
- playlist background custom color
- prev / next custom disable
- target for opening albums and songs URLs
2010.09.03 - version 2.0
*AS3 version
- new flabell standard structure
- bug fixes
2009.03.05 - version 1.0
AS2 version
* First release!
Flash Mp3 Player - tips and tricks
Introduction:
This is a fully customizable Flash MP3 Player, built with support for multiple artists and playlists.
Everything is customizable in the XML files, including the artists, the playlists, the colors, the sizes, the effects, and much more.
This free Flash Mp3 Player contains a handful of features and settings and it can easily be used as a Myspace flash mp3 player if you want to. It is easy to use the player in your Flash projects or as an independent Flash mp3 player on your html based website as well.
If you want to use the player in a Flash file, importing it is as easy as moving some actionscript files around, and dragging the movieclip containing the Flash Mp3 Player in your Flash file.
Skinning is very simple as well. To edit the file you don't need any Flash experience, as all the settings are loaded from an external XML file, which you can edit with any text editor. You can change the colors of the elements, the speed of the effects, the size of the images, the size of the mp3 player, add or remove features to the player, and much more.
As an example, you can disable the SHARE button in the XML file, and the control bar will automatically resize to fill the empty space on the right of the Flash Mp3 Player.
The playlists are also loaded from an external XML file, so you can add unlimited artists and albums.
The user can quickly turn on/off the audio, or change the volume by dragging the volume bar.
The code is very well commented, written following the best OOP practices in ActionScript 3, and the downloadable files come with all the assets used to create the Flash Mp3 Player such as the fonts, the PSD source files and the Flash source files.
Features:
1. Streaming: the song starts playing before it is fully loaded
2. Seek bar, for displaying the song's progress
3. Shuffle button
4. Share button, for sharing your Mp3 Player with your playlist on other websites
5. Download button / Buy button with customizable XML link (if not set, it is hidden)
6. Volume slider with customizable initial volume start value
7. Mute button
8. Auto-play: you can set the player to start with a song inside a specfied album
9. Customizable playlists through the XML file
10. Add unlimited albums/artists and songs
11. Colors are customizable from the XML file
12. Albums speed of the effects is customizable from the XML file
13. The size of the images in the Albums Gallery is customizable from the XML file
14. Albums Gallery with auto-start scrolling: if set to false, the scroll is set to pause
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 Mp3 Player work.
mp3gallery/xml/settings.xml - XML configuration file - This is where you make all changes to the look and feel of your Flash Mp3 Player.
mp3gallery/xml/mp3gallery.xml - Albums/Songs XML configuration file - This is where you make all changes to the player's albums and artists.
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.
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.
// JAVASCRIPT VARS:
var stageW = 560;
var stageH = 306;
var cacheBuster = Date.parse(new Date());
// SWF PARAMS:
var params = {};
params.bgcolor = "#ffffff";
params.allowfullscreen = "true";
params.allowScriptAccess = "always";
//params.wmode = "transparent";
// FLASHVARS:
var flashvars = {};
flashvars.componentWidth = stageW;
flashvars.componentHeight = stageH;
flashvars.pathToFiles = pathToFile + "mp3gallery/";
flashvars.xmlPath = "xml/settings.xml";
flashvars.contentPath = "xml/mp3gallery.xml";
swfobject.embedSWF("preview.swf?t="+cacheBuster, "myContent", 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 this product, please place comments one the comments page or contact us at [email protected].
Get a support ticket
121331 users
Products RSS Feed
Follow us on twitter
support@flabell.com
Andrei Neamtu
on 3/9/10
- AS3 version
- new flabell standard structure
- bug fixes
- album gallery fullscreen
- everything is customizable now
For the old AS2 version, all old 611 comments were deleted.
You will not be able to download the old version anymore.
Please help us to make the new version at least as good as the one before was or even more.
Tom McIntire
on 3/9/10
Preliminary tests are going VERY well.
daani najafi
on 4/9/10
finally it's here, this is so welcomed, thanks alot crew!
almeda07
on 4/9/10
Great, Awesome... thanks guys!
keirdoherty
on 4/9/10
keirdoherty
on 5/9/10
A bug to report:
http://keirdoherty.com/475872626198723...
(I have customised nothing beyond setting the width.)
Select an album to view its playlist, then go 'Back to Albums'. The selected album image is now centered in the player, sending all other album images off to either side.
This one is a quick fix?
on 5/9/10
Thanks for reporting the bug. That will be fixed is not a big issue. Keep in touch the next week.
smallstudio
on 5/9/10
Now the files are mutch big.
I noted that when the rubber is running, sometime you must click 2 time to open the album if you dont wait the stop of the rubber.
However, very good work.
I'll change the old implemented in my site
http://www.smallstudio.it/artisti.html
Bye
Viky
Andrei Neamtu
on 5/9/10
If the item that you selecte is not entirely visible, the item will com in center and then you will have to click again on it. It's not a bug this is how it was implemented to make a item visible first and then select it to view it's item.
malerok
on 5/9/10
on 6/9/10
That can be done only with flash CS4 or CS5 using the method we used here: http://www.flabell.com/flash/XML-HTML-...
We used there the "[Embed...]" tag method in action script for embeding the font from the external font file.
But this will not work for CS3 users.
At a certain moment we will use this method for all components when people will move to CS4 version so all characters are supported no matter the font used.
Please contact us at [email protected] if you want a special version with this embedding method to support Russian characters.
user1294
on 5/9/10
how to enter fullscreen mode.. I've seen controllers on stage in fla, but F key doesn't work and I don't see any controllers in swf
on 6/9/10
Go inside "settings.xml" file and inside the "albumsgallery" tag, "controller" son tag, you will find a "disableFullBt" tag. Set that to "false" and the fullscreen button will appear on the albums gallery and also the "F" key will work.