When the audio is converted you get the two xml files(settings.xml, mp3_player.xml) and the following HTML code:
<head>
<script type="text/javascript" src="swfobject/swfobject.js"</script>
<script type="text/javascript">
var stageW = 550;
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.keepSelected = "t";
flashvars.selectedWindow = "4";
flashvars.slideshow = "t";
flashvars.imageWidth = "140";
flashvars.imageHeight = "200";
swfobject.embedSWF("preview.swf?t=" + cacheBuster, "audioPlayer", stageW, stageH,
"9.0.124", "js/expressInstall.swf", flashvars, params);
</script>
</head>
<body>
<div id="audioPlayer">
<p>
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
alt="Get Adobe Flash player" />
</a>
</p>
</div>
</body>
Options set in settings.xml file:
- background_color - Sets the main background color of the player.
- scroll_large_background - Sets the scroll background gradient colors, stroke color and the height.
- scroll_button_color - Sets the scroll button gradient colors and the height.
- scroll_background_color - Sets the scrollbar background gradient colors, stroke color and
height.
- top_margin - Sets the top margin size of the player.
- player_margin - Sets the margin size of the player.
- images_border - Sets the images border size, border color and border on roll over color.
- reflection - Sets the pictures reflection size and transparency.
- playlist_background - Sets the playlist background gradient colors.
- splash_page_item - Sets the player splash page height, gradient colors and stroke color. Also, set the middle line color.
- albums_autoscrolling_speed - Sets gallery scrolling speed.
- scroll_bar_controls - Sets scrollbar controls (play and pause buttons) gradient colors and stroke color.
- automatic_scroll - Sets the auto scroll value for the gallery.
- album_image - 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 - 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 - Sets the playlist background color and stroke color.
- button_normal - Sets the playlist buttons normal state colors (gradient colors for even nodes and color for odd nodes) and stroke color.
- button_over - Sets the playlist buttons on roll over colors.
- button_pressed - Sets the playlist buttons on pressed colors.
- controls_bar - Sets control audio bar background gradient colors, stroke color and height.
- time_bar - Sets progress time bar gradient colors.
- time_bar_background - Sets time bar background gradient colors, stroke color and height.
- loading_bar - Sets loading sound bar color.
- text - Sets progress time text color.
- buttons_background - Sets control buttons (play, pause, next, previous) background gradient colors.
- buttons - Sets control buttons gradient colors, stroke color for all three states: normal, over and pressed.
- volume_shape - 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 - Sets volume slider main background gradient colors and slide button gradient colors.
- embed_button - Sets embed button gradient colors, stroke color and embed text symbol color for normal state and roll over state.
- embed_window - 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 - Sets shuffle button color and roll over color.
- player_reflections - Sets images reflections visibility.
- bottom_background - Sets bottom shape background gradient colors.
- distance_between_images - Sets distance between albums image.
- sideways_margin - Sets sideways albums gallery margins size.
- tooltip - Sets tooltip visibility and color for the tooltip background, text and little round shapes.
- albums_over_stop_moving - Sets the movement value when rolling over a thumb.
- playlist_looping - Loops an album playlist.
- buy_download_buttons - 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 - Sets embed button visibility.
- autoslide_pause_at_margins - Sest the auto slide pause time when scroll button arrives to margins.
- player_size - Sets player size (width and height).
- sound_volume - Sets initial sound volume when the sharing object is empty.
- image_size - Sets image size (width and height).
- automatically_begin_playlist - The Mp3 Flash Player starts with the playlist of the selected album
- auto_shuffle - The Mp3 Flash Player starts with the shuffle button activated
- start_playlist_playing_automatically - Toggles the auto-play for the selected playlist.
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 source 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.