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 support@flabell.com
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.
Mp3 Player for Adobe Flash - 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!
Mp3 Player for Adobe Flash - 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 support@flabell.com.
Get a support ticket
127106 users
Products RSS Feed
Follow us on twitter
support@flabell.com
ameliajune
on 7/2/12
Again, thank you for the EXCELLENT customer service. I have referred all my friends to Flabell.
on 9/2/12
It's best to avoid spaces, but right now, I don't think will be any problem if you'll use them. The songs would work.
We're glad you like Flabell. Enjoy the components!
amcgren
on 7/2/12
I changed the background color but the color of the corners did not change. Do I have to change these separately?
Thanks
on 8/2/12
on 9/2/12
You have all the colors editable in the settings.xml file. I'm not sure what corners you're referring to, but I'm pretty sure you can change any color in the XML file. Please check it out.
About making the background transparent, you'll need to add this param, in your code:
params.wmode = "transparent";
But you'll need to make sure the background transparency in the XML file is set to "0" too.
glaymon
on 9/2/12
on 13/2/12
This forum post discusses the subject:
http://www.flabell.com/topics/view/396
It will help you out on this one.
talabib
on 10/2/12
on 13/2/12
wbn
on 21/2/12
Thanks!
on 23/2/12
On your local machine Flash Player might restrict access to external resources. If you're running the player on your computer and not on a web server, then you'll find the solution to this problem in these series of comments:
http://www.flabell.com/flash/Flash-Mp3...
If the player is online and the link on the images does not work, please buy a support ticket and share a link to your player. We'll take a look and find a solution for you.
karamelos
on 21/2/12
I love your player! i need to display the Artists album like Grid Function like this one http://www.pamsheyne.com/pamSheyneDisc...
Is that possible from xml files? or do i need to make customs on source files? thank you
on 23/2/12
We're glad to see you like the player. Showing the albums on a grid type display would need some custom coding. We could help you on this, if you're interested. Please send an email at info@vuzum.com with more details about the way you need the player to function. Thanks!
kosh777
on 25/2/12
I want to embed this in an exiting page to blend in with my site, possible to do? I also tried to add a background image but it did not work? can you tell me how to do this? thanks!
Dave
on 27/2/12
You can embed this player in any webpage you need to as long as you have access to the webpages source files to add some code. This tutorial explains the process:
http://www.flabell.com/blog/1829/how-t...
Where would you need the background image? You could add any image in the component, but some changes in the Flash project might be needed.
addisflava
on 28/2/12
i just love your product am soon going to upload it to my page , but first there r some issues i faced & more futures i wanna add
Q1 is there any easy way of adding my mp3 w/o using xml because the data will be updated often
Q2 could i get tile & duration etc,,,from the mp3 tags instead of editing each tracks title
Q3 is there any way of associating this player with the Flash News Banner http://www.flabell.com/flash/Flash-New... i want this player to be in one of the tabs and the other tabs for video and other futures
thanks in advance
on 2/3/12
Thanks! I'll answer your questions below:
Q1. Yes, you can add the mp3s to your server and a system would update the XML file automatically. However this is another application and we cannot provide it on Flabell.
Q2. Yes, you can, but you'll need some changes in the project's code. This player does not have this functionality implemented.
Q3. Again, you'll need some custom work to build what you need here.
If you need our team's help with the above tasks, please send an email at info@vuzum.com with the details you want implemented. Thank you!
karamelos
on 28/2/12
Thank you
on 2/3/12
We're sorry, but there isn't an option in the XML file to increase the height of the description area. You'll need to change the ActionScript code for the component, to make this modification. If you need our help on this task, please contact us for custom work at info@vuzum.com. Thanks!
on 2/3/12
May i know the Mc name of the Text Field?
So i can search it on Script files
on 2/3/12
It's the "mcCaption" movieclip. You'll find it in the Playlist.as class.
Hope you'll get it done.
on 2/3/12
on 2/3/12
c6a5m4
on 29/2/12
Can you please provide instructions on how...
1) How to write a "php file that would populate the XML used for the playlists"?
2) The playlist can play the entire list of songs instead of stopping after each song (the loop button does not work for me)
Here is my player
http://www.dubcnn.com/2012/01/14/the-g...
Thank you,
on 2/3/12
These would be my answers:
1. This is a more complex task. You'll need some PHP coding knowledge to do this. We can't write instructions on how to do this, but we could just do it for you. Please contact us for custom work at info@vuzum.com, if you're interested.
2. The player you have seems to have been changed a little to display a logo in place of the "Back to albums" button. You have an option in the XML file:
<autoPlay>true</autoPlay>It's correctly set to "true", but I'm not sure why it's not working. The source files were changed so this might be the reason. As you can see that the player above, in this page works fine. If you need us to fix the problem, please contact us for custom work at the email address above. Thanks!
2 weeks ago
Also, would the same php script work with your "Mp3 Player with Playlist" component?
I'm considering purchasing this as well.
1 week, 6 days ago
You could design the back-end to be similar for the other player, but the output should be different, because the playlist XML files have different structure. However, you can find solutions for this too.
1 week, 2 days ago
Please reply.
Thanks
3 days, 5 hours ago