Standalone version
The standalone version comes with a JavaScript file to simplify configuring and embedding the player. This file includes theswfobject 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 “http://yoursite.com/path/to” with the correct paths to all files.
- <html>
- <head>
- <title>Your website</title>
- …
- <script type=”text/javascript” src=”path/to/audio-player.js”></script>
- <script type=”text/javascript”>
- AudioPlayer.setup(“http://yoursite.com/path/to/player.swf”, {
- width: 290
- });
- </script>
- </head>
- <body>
- <p id=”audioplayer_1″>Alternative content</p>
- <script type=”text/javascript”>
- AudioPlayer.embed(“audioplayer_1″, {soundFile: ”http://yoursite.com/path/to/mp3_file.mp3″});
- </script>
- <p id=”audioplayer_2″>Alternative content</p>
- <script type=”text/javascript”>
- AudioPlayer.embed(“audioplayer_2″, {soundFile: ”http://yoursite.com/path/to/mp3_file_2.mp3″});
- </script>
- </body>
- </html>
Configuration
You can configure Audio Player with the setup call in the HEAD section like this:
- <script type=”text/javascript” src=”path/to/audio-player.js”></script>
- <script type=”text/javascript”>
- AudioPlayer.setup(“http://yoursite.com/path/to/player.swf”, {
- width: 290,
- initialvolume: 100,
- transparentpagebg: ”yes”,
- left: ”000000″,
- lefticon: ”FFFFFF”
- });
- </script>
You can configure each separate player using the embed call like this:
- <script type=”text/javascript”>
- AudioPlayer.embed(“audioplayer_1″, {
- soundFile: ”http://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: ”http://yoursite.com/path/to/mp3_file_1.mp3,http://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 |
转自：http://www.cnblogs.com/noevil/archive/2011/01/26/1945390.html
