Flash Mp3 Player

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 2, 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.

There are currently no comments.

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 AS2?

Yes, the file is built in AS2 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.03.05 - 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 music will fade in/out between the values. When the user comes to the player again, the volume is already stored in the browser cache, and the mp3 player volume will start with the last value set by the user.

The code is very well commented, written following the best OOP practices in ActionScript 2, 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 songs
4. Share button, for sharing your Mp3 Player with your playlist on other websites
5. Download button with customizable XML link (if not set, it is hidden)
6. Buy button with customizable XML link (if not set, it is hidden)
7. Volume slider with cache support: saves the last volume value set by the user in the cache and uses it on new visit
8. Mute button
9. Auto-play: you can set the player to start with a song inside a specfied album
10. Customize the initial volume start value
11. Customize playlists through the XML file
12. Add unlimited albums/artists and songs
13. Colors are customizable from the XML file
14. The speed of the effects is customizable from the XML file
15. The size of the images is customizable from the XML file
16. Scrolling auto-start: 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.

     player/xml/settings.xml

     XML configuration file - This is where you make all changes to the look and feel of your Flash Mp3 Player.

     player/xml/mp3_player.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.

settings.xml structure:

Below you can see what each of the attributes in the XML file means:

<background_color 
color="0x201f1f"
/>

Sets the main background color of the player.

<scroll_large_background 
beginColor="0xeeeeee" 
endColor="0xeeeeee" 
height="35" 
strokeColor="0x8c8c8c"
/>

Sets the scroll background gradient colors, stroke color and the height.

<scroll_button_color 
beginColor="0xa90329" 
endColor="0x6d0019" 
height="10"
/>

Sets the scroll button gradient colors and the height.

<scroll_background_color 
beginColor="0xd7d7d7" 
middleColor="0xeae9e8" 
endColor="0xeae9e8" 
height="10" 
strokeColor="0xd0cfcd"
/>

Sets the scrollbar background gradient colors, stroke color and height.

<top_margin 
size="30"
/>

Sets the top margin size of the player.

<player_margin 
size="4"
/>

Sets the margin size of the player.

<images_border 
size="4" 
color="0xC6C6C6" 
rollOver="0x76001b"
/>

Sets the images border size, border color and border on roll over color.

<reflection
size="3" 
alpha="25"
/>

Sets the pictures reflection size and transparency.

<playlist_background 
beginColor="0x2e2b2b" 
endColor="0x1e1c1c"
/>

Sets the playlist background gradient colors.

<splash_page_item 
height="40" 
beginColor="0xffffff" 
endColor="0xe8e7e6" 
middleLineColor="0xffffff" 
strokeColor="0xbec0c1"
/>

Sets the player splash page height, gradient colors and stroke color. Also, set the middle line color.

<albums_autoscrolling_speed 
value="0.3"
/>

Sets gallery scrolling speed.

<scroll_bar_controls 
lineColor="0xffffff" 
beginColor="0xa90329" 
endColor="0x6d0019"
/>

Sets scrollbar controls (play and pause buttons) gradient colors and stroke color.

<automatic_scroll 
value="true"
/>

Sets the auto scroll value for the gallery.

<album_image 
backgroundHeight="50" 
albumTitleHeight="16" 
authorBackgroundBeginColor="0xa90329" 
authorBackgroundEndColor="0x6d0019" 
authorBackgroundStrokeColor="0x4e0314" 
albumBackgroundColor="0x76001b" 
albumBackgroundStrokeColor="0x69051c" 
authorNameColor="0xffffff" 
albumNameColor="0xcd4444" 
infoColor="0xffffff" 
infoRollOverColor="0x69051c" 
arrowColor="0xffffff" 
arrowBackgroundColor="0x76001b" 
arrowOverColor="0xcd4444"
/>

Sets album image background height, title of the album height, author background gradient colors and stroke color, album title background color and stroke color, author name text color, album name text color.

Also sets the info sign color, on roll over color. The arrow fields - sets the images arrows color, their background color and on roll over color.

<back_to_albums 
backText="BACK TO ALBUMS" 
backgroundHeight="45" 
backgroundBeginColor="0xa70329" 
backgroundEndColor="0x6f0019" 
backgroundStrokeColor="0x4e0314" 
album_song_changeTime="10" 
/>

Sets the back button text, background height, background gradient colors and background stroke color. Also sets the title animation time (changing album title with song title).

<playlist 
backgroundColor="0xffffff"
backgroundStrokeColor="0xeae9e9"
/>

Sets the playlist background color and stroke color.

<button_normal 
beginColor="0xffffff" 
endColor="0xf5f5f4" 
textColor="0x7d7d7d" 
oddNodeColor="0xf2f2f1" 
strokeColor="0xeae9e9"
/>

Sets the playlist buttons normal state colors (gradient colors for even nodes and color for odd nodes) and stroke color.

<button_over 
color="0x6e6e6e" 
strokeColor="0xffffff" 
textColor="0xffffff"
/> 

Sets the playlist buttons on roll over colors.

<button_pressed 
beginColor="0xa90329" 
endColor="0x6d0019" 
strokeColor="0xffffff" 
textColor="0xffffff"
/>

Sets the playlist buttons on pressed colors.

<controls_bar 
beginColor="0xffffff" 
endColor="0xe8e7e6" 
strokeColor="0xbec0c1" 
height="35"
/>

Sets control audio bar background gradient colors, stroke color and height.

<time_bar 
beginColor="0xa90329" 
endColor="0x6d0019"
/>

Sets progress time bar gradient colors.

<time_bar_background 
beginColor="0xcecece" 
middleColor="0xeae9e8" 
endColor="0xeae9e8" 
strokeColor="0xe5e5e0" 
height="8"
/>

Sets time bar background gradient colors, stroke color and height.

<loading_bar 
color="0xc5556e"
/>

Sets loading sound bar color.

<text 
color="0x4d4b4b"
/> 

Sets progress time text color.

<buttons_background 
color="0xeae9e8" 
overColor="0xf4f4f3" 
strokeColor="0xe5e5e0"
/>

Sets control buttons (play, pause, next, previous) background gradient colors.

<buttons 
beginColor="0x303030" 
middleColor="0x686868" 
endColor="0x232121" 
overBeginColor="0xc5556e" 
overMiddleColor="0xb3566c" 
overEndColor="0x70001a" 
strokeColor="0xffffff"
/>

Sets control buttons gradient colors, stroke color for all three states: normal, over and pressed.

<volume_shape 
beginActiveColor="0xa90329" 
endActiveColor="0x6d0019" 
beginNormalColor="0x686868" 
endNormalColor="0x232121" 
inactiveColor="0xcccccc"
/>

Sets volume icon gradient colors for normal state and roll over state and also set the inactive color when the volume goes to 0.

<volume_slider 
backgroundStrokeBeginColor="0xbec0c1" 
backgroundStrokeEndColor="0xbec0c1" 
mainBackgroundColor="0xffffff" 
sliderBackColor="0xeae9e8" 
sliderBackStrokeColor="0xe5e5e0" 
sliderBeginColor="0xa90329" 
sliderEndColor="0x6d0019"
/>

Sets volume slider main background gradient colors and slide button gradient colors.

<embed_button 
strokeColor="0x929292" 
beginColor="0xe6e5e4" 
middleColor="0xe6e5e4" 
endColor="0xe6e5e4" 
symbolColor="0x8c8c8c" 
symbolOverColor="0xa20327"
/>

Sets embed button gradient colors, stroke color and embed text symbol color for normal state and roll over state.

<embed_window 
mainStrokeColor="0x9D9D9D" 
mainColor="0xffffff" 
strokeColor="0xd1d1d1" 
color="0xe1e1e1" 
textColor="0xa90329" 
embedTextColor="0x000000" 
buttonColor="0xa90329" 
buttonStrokeColor="0xa90329" 
buttonTextColor="0xffffff" 
buttonRollOverColor="0xffffff" 
backgroundOverColor="0xcd4444" 
titleText="SELECT THIS TEXT:" 
copyButtonText="COPY" 
/>

Sets embed window background color and background stroke color, embed code background color and stroke color, and embed code text color, buttons text color, buttons background color and stroke color, buttons roll over color. Also sets title of the embed window text and copy button text.

<shuffle 
color="0x000000" 
overColor="0xa20327"
/>

Sets shuffle button color and roll over color.

<player_reflections 
value="true"
/>

Sets images reflections visibility.

<bottom_background 
beginColor="0x1f1d1d" 
endColor="0x2e2b2b"
/>

Sets bottom shape background gradient colors.

<distance_between_images 
value="25"
/>

Sets distance between albums image.

<sideways_margin 
value="0"
/>

Sets sideways albums gallery margins size.

<tooltip 
visible="true" 
backgroundColor="0xeaeaea" 
textColor="0x28201d" 
roundsColor="0x28201d"
/>

Sets tooltip visibility and color for the tooltip background, text and little round shapes.

<albums_over_stop_moving 
value="false"
/>

Sets the movement value when rolling over a thumb.

<playlist_looping 
value="true"
/>

Loops an album playlist.

<buy_download_buttons 
beginColor="0xb4b4b4" 
endColor="0x949493" 
strokeColor="0x8d8b8b" 
overBeginColor="0xc6c6c6" 
overEndColor="0xa8a8a8" 
overStrokeColor="0x8d8b8b" 
pressedBeginColor="0xe70001" 
pressedEndColor="0xa3011d" 
pressedStrokeColor="0xb20129" 
signColor="0xffffff"
/>

Sets buy and download buttons gradient colors and stroke color for the three states: normal, over and pressed. Also set the color for buy and download icons.

<embed_button_visibility 
value="true"
/>

Sets embed button visibility.

<autoslide_pause_at_margins 
value="1"
/>

Sets the auto slide pause time when scroll button arrives to margins.

<player_size 
width="560" 
height="306"
/>

Sets player size (width and height).

<sound_volume 
value="50"
/> 

Sets initial sound volume when the sharing object is empty.

<image_size 
width="140" 
height="200"
/>

Sets image size (width and height).

<automatically_begin_playlist 
value="true" 
albumIndex="3"
/>

The Mp3 Flash Player starts with the playlist of the selected album.

<auto_shuffle 
value="true"
/>

The Mp3 Flash Player starts with the shuffle button activated.

<start_playlist_playing_automatically 
value="true"
/>

Toggles the auto-play for the selected playlist.

<links_target 
value="_blank"
/>

Description text here.

<strings 
album="Album: " 
song="Now playing: " 
playing="play" 
pausing="pause" 
forwarding="next" 
rewarding="previous" 
shuffle="shuffle" 
volume="volume" 
share="SHARE"
/>

Description text here.

mp3_player.xml structure:

This xml contains the mp3 player data. It has a number of album nodes like the next one:

Every album node has three attributes: album name, author name and album image.

<album 
name="Paper Trail" 
author="TI" 
imageUrl="images/TI/image.jpg"
/>

Also, every album node contains a number of sub nodes, which represent the songs of the album. The song node value corresponds to an mp3 file and has four attributes: name of the song, duration of the song, buy or download buttons and download path of the song.

<song 
name="56 Bars (Intro)" 
duration="0 : 34" 
buy="false" 
download="true" 
downloadSource="download/song1.mp3">
songs/song3.mp3
</song> 

If the buy attribute is set to true it means that the user can buy the song. If it is set to false then we go further to the download attribute, and the buy button won’t be visible.

If download is set to true it means that the song is free and you can download it by clicking on the download button. If it is set to false, it means that the song is not available for download either, so none of these two buttons will be visible.

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 = 306; 
var cacheBuster = Date.parse(new Date());

var flashvars = {};
var params = {};

params.bgcolor = "#ffffff";
params.allowfullscreen = "true";

flashvars.stageW = stageW;
flashvars.stageH = stageH;

flashvars.pathToFiles = "player/";

flashvars.settingsPath = "xml/settings.xml";
flashvars.xmlPath = "xml/mp3_player.xml";

flashvars.imageWidth = "140";
flashvars.imageHeight = "200";

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 the product, please contact us at support@flabell.com.