Standalone version
The standalone version comes with a JavaScript file to simplify configuring and embedding the player. This file includes the swfobject library.
Note: the zip file includes two other files:
- audio-player-noswfobject.js (a version of audio-player.js without the swfobject library if you are including it separately)
- audio-player-uncompressed.js (same as above but uncompressed so you can read the code)
Installation and usage
- Download the zip file
- Extract and upload the files to your server (only two files are required: audio-player.js and player.swf)
- Include the audio-player.js file in the HEAD section of your html page
- Still in the HEAD section, setup Audio Player as seen in the example below (the only required option is width)
- To insert a player on the page, place an HTML element (a P tag in the example but it can be anything) and give it a unique ID
- This element will be replaced with a player. If the browser doesn’t support Audio Player, the element will not be replaced so use it to show alternative content (maybe a message telling the user to download Flash)
- Insert the script tag after the element as shown below
Example
Ensure you replace “yoursite.com/path/to” with the correct paths to all files.
<html> <head> <title>Your website</title> ... <script type="text/javascript" src="/img/spacer.gif">Configuration
You can configure Audio Player with the setup call in the HEAD section like this:
<script type="text/javascript" src="/img/spacer.gif">You can configure each separate player using the embed call like this:
<script type="text/javascript"> AudioPlayer.embed("audioplayer_1", { soundFile: "yoursite.com/path/to/mp3_file.mp3", titles: "Title", artists: "Artist name", autostart: "yes" }); </script>To load multiple files
Simply set soundFile to a comma delimited list of mp3 files. Optionally, you can also provide a comma delimited list of titles and artists:
<script type="text/javascript"> AudioPlayer.embed("audioplayer_1", { soundFile: "yoursite.com/path/to/mp3_file_1.mp3,yoursite.com/path/to/mp3_file_2.mp3", titles: "Title 1,Title 2", artists: "Artist name 1,Artist name 2" }); </script>List of options
Tracks
Option | Default | Description |
---|---|---|
soundFile | required | comma-delimited list of mp3 files |
titles | overrides ID3 information | comma-delimited list of titles |
artists | overrides ID3 information | comma-delimited list of artists |
Options
Option | Default | Description |
---|---|---|
autostart | no | if yes, player starts automatically |
loop | no | if yes, player loops |
animation | yes | if no, player is always open |
remaining | no | if yes, shows remaining track time rather than ellapsed time |
noinfo | no | if yes, disables the track information display |
initialvolume | 60 | initial volume level (from 0 to 100) |
buffer | 5 | buffering time in seconds |
encode | no | indicates that the mp3 file urls are encoded |
checkpolicy | no | tells Flash to look for a policy file when loading mp3 files (this allows Flash to read ID3 tags from files hosted on a different domain) |
rtl | no | switches the layout to RTL (right to left) for Hebrew and Arabic languages |
Flash player options
Option | Default | Description |
---|---|---|
width | required | width of the player. e.g. 290 (290 pixels) or 100% |
transparentpagebg | no | if yes, the player background is transparent (matches the page background) |
pagebg | NA | player background color (set it to your page background when transparentbg is set to ‘no’) |
Colour scheme options
All colour codes must be 6-digit HEX codes without ‘#’ or ’0x’ in front.
Option | Default | Description |
---|---|---|
bg | E5E5E5 | Background |
leftbg | CCCCCC | Speaker icon/Volume control background |
lefticon | 333333 | Speaker icon |
voltrack | F2F2F2 | Volume track |
volslider | 666666 | Volume slider |
rightbg | B4B4B4 | Play/Pause button background |
rightbghover | 999999 | Play/Pause button background (hover state) |
righticon | 333333 | Play/Pause icon |
righticonhover | FFFFFF | Play/Pause icon (hover state) |
loader | 009900 | Loading bar |
track | FFFFFF | Loading/Progress bar track backgrounds |
tracker | DDDDDD | Progress track |
border | CCCCCC | Progress bar border |
skip | 666666 | Previous/Next skip buttons |
text | 333333 | Text |