Getting Started
API Reference
Technical Info
|
Setup litePlayer using SWFObject
To add a basic instance of litePlayer to your website or application, start by including the swfobject.js helper file in the head of your document:
<html>
<head>
<title></title>
<SCRIPT type="text/javascript" src="swfobject.js"></SCRIPT>
</head>
<body>
</body>
</html>
Be sure to include the correct path to your swfobject.js file.
Next, place a DIV element wherever you want litePlayer to appear in the body of your document and assigned it a unique ID:
<html>
<head>
<title></title>
<SCRIPT type="text/javascript" src="swfobject.js"></SCRIPT>
</head>
<body>
<DIV id="playerID"></DIV>
</body>
</html>
IMPORTANT: This DIV functions as a placeholder only and will be completely replaced by litePlayer when loaded in a web browser. Since the DIV will not exist in the document, it will not behave like a block element, and any styles assigned to it will be ignored.
Next, place a call to litePlayer in the document using SWFObject. It can go anywhere, as long as it comes after the DIV element:
<html>
<head>
<title></title>
<SCRIPT type="text/javascript" src="swfobject.js"></SCRIPT>
</head>
<body>
<DIV id="playerID"></DIV>
<SCRIPT type="text/javascript">
swfobject.embedSWF("litePlayer.swf","playerID","50","50","9",null,settings);
</SCRIPT>
</body>
</html>
1. Be sure to include the correct path to your litePlayer.swf file.
2. This value must match the ID of the corresponding DIV element.
3. This value sets the width of the player instance in pixels.
4. This value sets the height of the player instance in pixels.
The remaining values ("9",null,settings) should not be changed. The "9" indicates the minimum version of Flash Player that litePlayer requires.
Finally, add a settings object to specify the audio file or stream to play. The settings object can also include various options to customize the player's appearance or behavior.
<html>
<head>
<title></title>
<SCRIPT type="text/javascript" src="swfobject.js"></SCRIPT>
</head>
<body>
<DIV id="playerID"></DIV>
<SCRIPT type="text/javascript">
var settings = { file: "audiofile.mp3" };
swfobject.embedSWF("litePlayer.swf","playerID","50","50","9",null,settings);
</SCRIPT>
</body>
</html>
Be sure to include the correct path to your audio file or stream. If using a relative URL, location is relative to the document in which litePlayer is embedded.
Additional Tips
Customization Options
The litePlayer API provides various options to dynamically customize the appearance or behavior of each player instance. These options can be included as comma-separated name:value pairs in the settings object as follows:
var settings = { file: "audiofile.mp3", loop: true, color: "CC0000" };
Note that option names should never be in quotes. Option values should only be in quotes if their data type is string. (See API Reference if you're unsure.)
Player Transparency
If you're using external images with transparency, you'll need to make litePlayer transparent as well in order for the document background to show through. You can achieve this by adding an 8th argument to the litePlayer call and inserting a name:value pair to set the wmode to "transparent" as follows:
swfobject.embedSWF("litePlayer.swf","playerID","50","50","9",null,settings,
{ wmode: "transparent" });
Note that the above should be a single line of code, with no linebreaks.
Alternative Content
One unique benefit of the SWFObject method is that you can designate alternative content to be displayed in the event that Flash Player is not present on the end-user's computer. Just place the alternative content inside the DIV element as follows:
<DIV id="playerID">alternative content goes here</DIV>
As you might expect, the alternative content will not be displayed under normal circumstances, where Flash Player is present on the end-user's computer.
Key Installation
Your license key can be included as a name:value pair in the settings object as follows:
var settings = { file: "audiofile.mp3", key: "0123456789ABCDEF" };
Please refer to our extensive Demos area for practical litePlayer implementations with complete code examples that you can copy-and-paste.
|