Setting up your Dynamic MP3 Player
Follow these simple steps to set up your Dynamic MP3 Player.
- Organize your .mp3's into folders that will represent the album for the songs. The .mp3 file names must not include apostrophes.
- If you would like to set the order of how your songs will show up, put 'true' in the SORT_ORDER tag within the xml, and then put the order # and a period before the name of your songs:
- 1.mysong.mp3
- 2.anothersong.mp3
- 3.thirdsong.mp3
- This will allow you to set the order of your songs no matter which folder they are in.
- Create an 80 x 80 pixel thumbnail (must be a .jpg) for each folder, which will represent the album's thumbnail image. Save the thumbnail into it's corresponding folder of .mp3s.
- Drag your folders into the 'songs' folder. All .mp3's must be contained within a subfolder of the 'songs' folder.
- Open the supplied .fla file to set your player dimensions and password. (The supplied .fla will already have the Dynamic MP3 Player on the stage).
- Resize and position the player by using the Properties window or by just clicking and draggin a corner. The objects within the player may look distorted after you resize, but the code within the player will rearrange everything automatically so it looks right when published.
- If you will be using the player as just a part of an .html file (Like my example on FlashDen), or as an externally loaded .swf, set the stage dimensions to be the same size as the MovieClip and position the movie clip at x=0, y=0 on the stage. (You may have to adjust the width of the player to be 1 pixel thinner than the stage size).
- Double-Click on the Dynamic MP3 Player movie clip to open it up.
- Select frame 1 of the 'a' layer in the timeline and open the Actions Panel.
- On line #36 in the ActionScript code set the password to whatever you would like. Remeber that the password is case-sensitive.
- There is no need to change anything else within the .fla unless you want to further costomize the file.
- Go to File>Publish Settings... and set your desired publish settings.
- Publish your .swf.
- Next, upload all of the following files/folders to your site into a single directory:
- MP3Player.swf
- mp3_player.xml
- index.html
- AC_RunActiveContent.js
- The 'songs' folder, which should include all of your .mp3 files and thumbnails
- The 'php' folder, which contains the .php files needed to access your .mp3's and their corresponding ID3 tags. There will be quite a few .php files within this folder. I have used Open Source php scripts called getID3() by James Heinrich. More information about this can be found below.
- Next, open the mp3_player.xml file on your computer and set the absolute path to the folder containing the php files on your site within the PHP_PATH tags.
- Re-upload the .xml file (now that you have the correct .php path set).
- You should now be able to view your Dynamic MP3 Player online!
The .xml file
- PHP_PATH - Set the absolute path of the folder containing all of the .php files here.
- AUTOSTART_PLAYER - Put 'true' if you would like the player to autostart playing the first song it loads, else put 'false'. There is no way to set which song will play first, but the player should load the songs alphabetically by folder, and song name.
- AUTO_NEXT - If you would like the player to automatically go to the next song once a song is finished put 'true' here, otherwise put 'false'.
- SORT_ORDER - Put 'true' if you want your songs to show up in a specific order. If you put 'true' you must add the order number and a period at the beginning of each .mp3 file name.
- PLAYLIST - Set the initial state of the playlist ('open' or 'closed'). Also set whether it is enabled ('true' or 'false') for the user to open or close it.
- SONG_TITLE - Set the visibility of this column, the name of this column (note that this column will always show the ID3 tag 'Title'), the initial width (percentage, all visible columns must add up to 100%) of this column, and the minimum width (pixels) that the user can drag it to.
- SONG_LENGTH - Set the visibility of this column, the name of this column (note that this column will always show the ID3 tag 'Length'), the initial width (percentage, all visible columns must add up to 100%) of this column, and the minimum width (pixels) that the user can drag it to.
- SONG_ARTIST - Set the visibility of this column, the name of this column (note that this column will always show the ID3 tag 'Artist'), the initial width (percentage, all visible columns must add up to 100%) of this column, and the minimum width (pixels) that the user can drag it to.
- SONG_ALBUM - Set the visibility of this column, the name of this column (note that this column will always show the ID3 tag 'Album'), the initial width (percentage, all visible columns must add up to 100%) of this column, and the minimum width (pixels) that the user can drag it to.
- SONG_GENRE - Set the visibility of this column, the name of this column (note that this column will always show the ID3 tag 'Genre'), the initial width (percentage, all visible columns must add up to 100%) of this column, and the minimum width (pixels) that the user can drag it to.
- PLAYER - Set the main background color of the player. Use hexadecimal numbers (Do not include '0x').
- PLAYER_BUTTONS - Set the color of the buttons on the Audio Player. Use hexadecimal numbers (Do not include '0x').
- PLAYER_WINDOW - Set the color of the text within the information window on the Audio Player. Use hexadecimal numbers (Do not include '0x').
- PROGRESS_BAR - Set the color of the progress bar on the Audio Player. Use hexadecimal numbers (Do not include '0x').
- VISUALIZER - Set the color of the audio visualizer on the Audio Player. Use hexadecimal numbers (Do not include '0x').
- SONG_BAR - Set the background colors of the song bars (There are 2 colors, that if set different, the list of songs will alternate colors). Set the background color of the song bar when it is selected. Set the text color on the song bars, as well as the text color when the bar is selected. Use hexadecimal numbers (Do not include '0x').
- SORT_BAR - Set the background color of the sort buttons/bar. Set the text color of the sort buttons/bar. Set the highlight color used when a user is resizing the sort buttons/bar. Use hexadecimal numbers (Do not include '0x').
- EXPAND_BAR - Set the background color of the expand bar. Set the text color of the expand bar. Use hexadecimal numbers (Do not include '0x').
- SEARCH_BAR - Set the background color of the search bar. Set the text color of the search bar. Use hexadecimal numbers (Do not include '0x').
- SCROLL_BAR - Set the color of the scrollbar dragger. Use hexadecimal numbers (Do not include '0x').
Other useful information
If you are dragging the main movie clip into another .fla file, make sure you copy all of the contents within the supplied .fla's library and paste them into your new .fla. If you do not do this, some of the needed assets will not be available in your new .fla and the file will not work properly.
Also, be sure to copy the 'caurina' folder to the new destinations if you will be publishing the new .swf from a different directory. This file accessess classes from that folder, if it is not available for flash to access, it will not publish correctly.
Error codes
Error codes will show up in the 'Title' field for each song if one is reported. The following list describes each error code.
- Error_101: - This error means that there is an apostrophe within the filename of the specified .mp3 file. You must delete the apostrophe in the filename in order for it to work properly with this player.
getID3() PHP Classes
I have used the 'getID3()' .php classes created by James Heinrich, which I am able to use according to the GNU GENERAL PUBLIC LICENSE.
The classes that I have used are all contained within the 'getid3' folder within the 'php' folder. These classes are open for anyone to use as long as you follow the guidelines in the licensing.
Note: The .php files called: 'collectSongs.php', 'getSongID3.php', and 'writeSongID3.php' that are located at the root level of the 'php' folder where all written by myself to access the getID3 classes. These files are not OpenSource and may not be resold or used as part of another product.
I have not included all of the files that came with the download. If you would like, you can access all of the source files at:
Here is the link to the licensing code:
This file uses Caurana Tweener
Documentation for Tweener can be found at http://code.google.com/p/tweener/
Licensing for Tweener can be found at http://www.opensource.org/licenses/mit-license.php
Licensing notice for Caurina Tweener
The MIT License
Copyright (c)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.