Nifty Audio Player Documentation

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

mxp 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

 

 

 

Free Package

Want to try before you buy? Free version has all the functionality, but includes small promotional message.

Download

Paid Package

Use a credit card or PayPal. Download will start immediately after purchse. You’ll also receive an email with the download link.

Price: $20

Purchase

Nifty Products

About Flash Nifties

Flash Nifties is a collection of flash components and tools designed to take the pain out of creating rich interactive presentations. These robust flash tools can be set up in minutes, and most have a fully functional free download, so you can give them a try without putting up any cash. Enjoy!

Testimonials

"Masterfully executed!"

I would like to say that you have done an amazingly great job! Masterfully executed! Throughly designed! Perfect in every way. Thank you so much for offering a photo gallery that works like a photo gallery should.

Steve Nyhof (Auto flash gallery)

"Can't say enough good things"

Just bought your product and i can't say enough good things about it. I'm not the most proficient flash user, which is part of the reason i got this product...to help a project.

Sandlog (Flash Media Gallery)

"All I could have asked for an more"

I've used your xml flash gallery just a couple of days, but I was so impressed that I just had to give you props. This is all I could have asked for an more. Thanks!

Todd D. (XML flash gallery)

more testimonials