Basic Setup - Adding Player to your html page
Step1 - Set up file structure
Un-zip the downloaded package and place the folder "audio_player_files" on the same folder level as the page that will display the player in your site.
Step2 - Add to your page
Open your html page in an html editor and add the following line somewhere between the <head></head> tags:
<script type="text/javascript" src="audio_player_files/flashdetect.js"></script>
In the body of the page, where you want the player to appear, paste the following code:
<div id="flashcontent">this will be replaced with flash </div>
<script type="text/javascript">
var so = new SWFObject("audio_player_files/audioPlayer.swf", "player", "400", "250", "6", "#666666");
so.addVariable("xmlPath", "audio_player_files/data.xml");
so.write("flashcontent");
</script>
You can adjust the width and height of the flash by changing the values "400"- width and "250" - height. The above code can also be found in the included audioPlayer.html page.
Step3 - Add your music
Drag audio files into audio_player_files/music folder, and open data.xml in an html editor. Scroll down to where it say: <group>. Each line between the <group></group> tags represents one audio file in the player. Add new lines in the following format:
<song file="[path to music file].mp3" title="Title text " />
Paths to music have to be relative to the html page that is displaying the player, not the swf or the xml.
Customizing The Player Using XML
Open data.xml using a text or html editor. You will notice a list of variables defined at the top. For brevity, some settings are grouped together. The order in which settings in a group appear is important, you should also not have any spaces between settings in a group, only a single comma.
Rounded rectangles such as buttons, sliders and backgrounds follow this format:
SettingName="topColor,bottomColor,fillAlpha,cornerRadius,strokeColor, strokeAlpha,strokeWidth"
topColor and bottomColor are the top and bottom colors of the gradient fill. cornerRadius refers to the roundness of the rectangle. To make hard corners, set to 0.
Simple rectangles, such as scrollbar and list
items:
SettingName="color,alpha"
Text fields:
SettingName="font,color,alpha,size,bold"
The following is a table of descriptions and sample values of all the settings:
| Attribute with sample value | Description |
| playerMode="1" |
Determines how many buttons to show. 1 - full player 2 - all except for list button 3 - play/pause, progress bar and volume button 4 - play/pause and progress bar 5 - play/pause and song title |
| displayTimeInfo="true" | Set to true to display time info(0:00/0:00). Set to false to hide time info. |
| playerWidth="350" | Width of player |
| playerHeight="35" | Height of player |
| playerX="0" |
Horizontal placement of player |
| playerY="0" |
Vertical placement of player |
| flyOut="bottom" |
Set to "top" to have the list and volume controller fly out on top. Otherwise set to "bottom" |
| autoStart="true" |
Set to true to play first audio as soon as player opens. Set to false to pause at start |
| buttonSize="25" |
Width and height of buttons |
| buttonPadding="5" |
Space between buttons and left edge of player |
| buttonY="5" |
Vertical placement of buttons |
| playInSequence="true" |
Set to true to play all songs in sequence. Set to false to stop after each song. |
| playerVolume="100" |
0-100 - Initial player volume |
| embedFonts="false" |
Set to true if you want to use embedded fonts. You will have to create a text field in audioPlayer.fla, and embed the font you wish to use. See Defining Text Styles |
| playerBg= "282828,000000,100,5,171717,100,1" |
Player background |
| playerBgShine= "FFFFFF,FFFFFF,10,5,333333,0,1" |
Faded Rectangle covering the upper half of the background. Gives player a shiny look |
| buttonBg= "444444,000000,100,7,000000,100,1" |
Button background |
| buttonInnerStroke="0,0,0,7,333333,100,1" |
Buttons have an inner stroke to give them more dimension. First 3 values have no effect, only stroke and roundness values are used. |
| buttonBgHover= "0D97F2,075d99,100,7,064B79,100,1" |
Rollover fill |
| buttonIcon="888888,100" |
Button icon color/opacity |
| buttonIconHover="FFFFFF,100" | Button icon rollover color/opacity |
| displaySongText= "Verdana,A4A4A4,100,10,false" |
Text displaying currently playing song |
| displaySongTimeTotal= "Arial,A4A4A4,100,10,false" |
Text displaying total time |
| displaySongTimeElapsed= "Arial,FFFFFF,100,10,true" |
Text displaying time elapsed |
| displaySongTextY="2" |
Vertical placement of the song title text |
| displaySongTimeY="2" |
Vertical placement of the time display |
| pauseDisplayFor="2" |
When text is too long to fit into display, it will scroll across, pausing after scrolling the length of the field. This setting tells player how long to pause between each scrolling interval. |
| songTitleScrollTime="3" |
When text is too long to fit into display, it will scroll across. This setting tells player the speed at which to scroll text in seconds. |
| sliderHeight="5" |
Height of progress bar/width of volume slider track |
| sliderY="21" | Vertical placement of progress bar |
| sliderButtonWidth="10" | Play head width / Volume slider height |
| sliderButtonHeight="10" |
Playhead height / Volume slider width |
| sliderBg="000000,333333,100,3,0,0,0" |
Progress bar background |
| sliderFill="0D97F2,075d99,100,3,0,0,0" |
Progress bar to left of playhead |
| sliderStramProgress= "333333,444444,100,3,0,0,0" |
Progress bar background that fills as music downloads (preloader) |
| sliderButton= "FFFFFF,666666,100,10,333333,100,1" |
Playhead / Volume slider button |
| volumeHeight="100" |
Height of volume slider background |
| volumeBg= "222222,000000,100,9,333333,100,1" |
Volume background |
| volumeSliderBg="333333,444444,100,3,0,0,0" |
Volume track color |
| volumeSliderFill="0D97F2,075d99,100,3,0,0,0" |
Volume fill color (corresponds to volume setting) |
| volumeText="Arial,FFFFFF,100,10,false" |
Volume text |
| volumeSliderButton= "FFFFFF,666666,100,9,333333,100,1" |
Volume slider button |
| listOpen="true" |
Set to true to have song list open at start. Set to false to keep it closed until user clicks the list button. |
| listHeight="220" |
Height of song list |
| listPadding="10" |
Song list padding |
| listScrollbarWidth="9" |
Width of scrollbar |
| listBg="222222,000000,100,15,333333,100,1" |
Background of song list |
| listScrollbar="666666,100" |
Scrollbar color/opacity |
| listScrollbarBg="000000,100" |
Scrollbar background |
| listItemHeight="20" |
Height of song list item |
| listItemBg="333333,100" |
Color/opacity of list item background |
| listItemBgActive="075d99,100" |
Color/opacity of list item background rollover |
| listTitleText="Verdana,999999,100,10,false" |
List item text settings |
| listTitleTextActive= "Verdana,FFFFFF,100,10,false" |
List item rollover text settings |
| listTitleScrollTime="5" | If song title text is too long to fit in the list item, player will scroll the text to reveal it over time. This setting tells the player how fast to scroll it in seconds. |
Using The audioPlayer Component
You can use the audioPlayer component to easily add the player to flash movies. The
download includes an example flash file to help you get started. You will
need Flash MX 2004 or higher to use the component. Flash movies using audioPlayer component should be published
for flash player 6 or higher.
Step 1 - Install Component
Make sure you have the latest version of Adobe Extensions Manager. This is a free software available here. Once you have launched Adobe Extensions Manager double-click on audioPlayer.mxp. This will install and activate the component.
Step 2 - Add Gallery To Your Flash
Restart Flash. You should see the component in the Flashnifties sub-directory of the components panel. Drag a copy onto the stage, and position it.
Step 3 - Set Up File Structure and XML
Follow the steps outlined in Basic Setup above for setting up player.
Controlling audioPlayer with Actionscript
The following is a list of functions and properties that the player responds to, as well as events that the player sends out. For more on using events, see next section below.
| Method | Description |
| audioPlayer.loadXML(xml) | Loads xmlfile and creates player. |
| audioPlayer.playSong(song) | Accepts array as parameter: [title:"Song title", file:"pathtofile.mp3"] and plays that song, while displaying the song title. |
| audioPlayer.nextSong() | Plays next song in playlist. If player is paused, it will re-start it. If player has reached the end of playlist, first song is played. |
| audioPlayer.prevSong() | Plays previous song in play list. If player is paused, it will re-start it. If player is on first song, last song is played. |
| audioPlayer.pauseAudio() | Calling this function is same as pressing the play/pause button. If a song is playing, it will pause and if it's paused, it will re-start. |
| audioPlayer.showVolume() | Shows volume controls |
| audioPlayer.hideVolume() | Hides volume controls |
| audioPlayer.showList() | Shows play list. |
| audioPlayer.hideList() | Hides play list. |
| Property | Description |
| audioPlayer.autoLoadXML | Boolean - default true determines if xml is to be loaded when component loads. Should be set to false when invoking audioPlayer.loadXml(). |
| audioPlayer.currentSong | Number - Current song playing in the player. Count starts at 0. |
| audioPlayer.playing | Boolean - true is music is playing |
| audioPlayer.playList | Array - of songs in player |
| audioPlayer.message | String - text currently displayed in song title bar |
| audioPlayer.musicVolume | Number - 1-100 corresponding to music volume. |
| Event | Description |
| onXmlLoaded | Triggered when xml is loaded. EventObject.xml is the xml object. |
| onXmlParsed | Triggered when xml is finished parsing |
| onPlayerCreated | Triggered when player elements have been created. EventObject.player is reference to the player movieclip |
| onVolumeHide | Triggered when volume controller is hidden |
| onVolumeShow | Triggered when volume controller is shown |
| onListHide | Triggered when song list is hidden |
| onListShow | Triggered when song list is shown |
| onButtonRollOver | Triggered every time a button is rolled over. EventObject.btn is a reference to the button movie clip being rolled over |
| onButtonRollOut | Triggered every time a button is rolled out. EventObject.btn is a reference to the button movie clip. |
| onPlayheadDragging | Triggered every frame while the playhead is being dragged. EventObject.playheadPosition is the current position of the playhead |
| onPlayheadRelease | Triggered when playhead dragging stops. EventObject.musicPosition is the new position in the music file. |
| onVolumeDragging | Triggered every frame while the volume slider is being dragged. EventObject.volume is the the new volume |
| onVolumeRelease | Triggered when volume dragging stops. EventObject.volume is the the new volume |
| onAudioStart | Triggered when new audio file begins to play. EventObject.audio is an array of audio information. audio.file - path to audio file. audio.title - title of audio |
| onNextSong | Triggered when next song begins to play. EventObject.currentSong is the number of current song in play list |
| onPrevSong | Triggered when previous song begins to play. EventObject.currentSong is the number of current song in play list |
| onPlay | Triggered when music begins to play after being paused |
| onPause | Triggered when music is paused |
| onPlaylistCreated | Triggered when play list is populated. EventObject.playList is the array of songs in play list |
Example Using Event Listeners
The following is an example of using the onNextSong event to trace out the name and path of current song.
// create event listener object
var mylistner:Object = new Object()
// set listener response
mylistner.onNextSong = function(EventObject:Object){
var currentSong = EventObject.currentSong
trace("song title - "+audioPlayer.playList[currentSong].title)
trace("song path - "+audioPlayer.playList[currentSong].file)
}
// Add event listeners
to instance of component
audioPlayer.addEventListener("onNextSong", mylistner)
Creating custom buttons / User Interface
Purchased version of the Audio player allows you to create your own buttons and sliders on the stage to be used by the player. Select the component on the stage and open the parameters tab of the properties panel. Set "Use Custom UI" to true. You need to create a movie clip on the same frame as the player component and give it an instance name: "customUI". Now the player will hide itself and will look for buttons within your cutomUI movieclip to control. Demo 02 on the demos page demonstrates this and is a good reference for which movieclip names the player will look for.
Note: This option is only available in the purchased version. You will need to replace the component in the demo with the purchased one for it to work.
Defining Text Styles
By default the player does not use embedded fonts, allowing the player to be under 20K. You can set any font you want in the xml, but by default these will be system fonts, which means that text will not appear smoothed and cannot have transparency. If you want to use embed fonts, you will need to embed your desired font(s) in the audioPlayer.fla or your flash file.
Embed fonts
Open audioPlayer.fla and using the text tool create a text field somewhere outside the visible stage. From the dropdown in properties panel select the type of font you wish to use. Select "Dynamic Text" for the type, then click the embed button. Select Uppercase, Lowercase Numbers and Punctuation from the list and press OK. Repeat this step for any other font you want to use and re-publish the flash file.
Setup xml
Assuming you followed the above step, you will be able to use embedded font(s) in your player. Open data.xml in an html editor and set embedFonts="true". For each of the text fields, set the font name to the name of the embedded font, exactly as it appears in the Properties panel in Flash. Text styles are groupped in xml for brevity. The format is as follows:
textSettingName="font,color,alpha,size,bold"
font - Name of font
color - Hex color value (FF0000)
size - Text size in pixels
bold - true for bold, false for normal
© Copyright 2010 FlashNifties.com | savdesign.com