Note that this Wiki is a work in progress, items may not be updated or may disappear entirely as the pages are updated.
PlayerSDK Generic Widgets
From SpacialAudio
Contents |
BETA Software
The generic player widgets are currently available to the public as a BETA software release. Features and documentation are subject to change.
If you wish to implement a generic player widget, please perform thorough testing before deploying it to a public web site. For more information, or to report any issues, please contact support@spacialaudio.com.
A list of known issues with the current BETA release are available at the bottom of this page.
Generic Widget Examples
Generic widgets can help you get up and running within minutes. Just Copy & Paste a few lines of HTML/Javascript code, change a few settings and you are ready.
View some example widgets below - then once you know which one you want to use, go ahead and read further down how they can be set up.
- HTMLView Widgets
- http://media.streamads.com/playersdk/v2/widgets/webplayer/widget1/index.html (All Examples)
- http://media.streamads.com/playersdk/v2/widgets/webplayer/widget1/htmlWidget_bg.html (Design BG - Background Image)
- http://media.streamads.com/playersdk/v2/widgets/webplayer/widget1/htmlWidget_a.html (Design A - White Background)
- http://media.streamads.com/playersdk/v2/widgets/webplayer/widget1/htmlWidget_b.html (Design B - Dark Background)
- ASX HTMLView Widgets
- http://media.streamads.com/playersdk/v2/widgets/webplayer/widget1/index.html (All Examples)
- http://media.streamads.com/playersdk/v2/widgets/webplayer/widget1/widget_bg.asx (Design BG - Background Image)
- http://media.streamads.com/playersdk/v2/widgets/webplayer/widget1/widget_a.asx (Design A - White Background)
- http://media.streamads.com/playersdk/v2/widgets/webplayer/widget1/widget_b.asx (Design B - Dark Background)
HTML Widget
Step 1: Create your settings javascript file
The first thing you need to do is create a file called station.settings.js and in this file you must specify all the settings the widget needs to operate.
Here is an example settings file:
playerWidget.pid = 13100; //<-- StreamAds Publisher ID playerWidget.sid = 104113; //<-- SpacialNet/AudoRealm Station ID playerWidget.mediaURL = 'http://wm5.spacialnet.com/science1/canned/canned-ps-a.wma'; //<-- URL to tune into your station //OPTIONAL (If not specified, will be auto-detected) playerWidget.stationName = 'Demo Station'; playerWidget.stationCoverPicURL = 'http://media.streamads.com/playersdk/v2/widgets/webplayer/arplayer/canned/'; playerWidget.useGateway = true; //Set to TRUE if you use Shoutcast streams. //NOTE: We recommend avoiding Shoutcast streams due to lack of proper metadata support //We recommend Windows Media, Wowza or Icecast servers instead (In that preferred order) playerWidget.useSC = false; //DEBUG mode? Remember to disable this once you are done developing! playerWidget.testingPhase = true;
Step 2: Include required files
On any page you wish to place the HTML Widget Player you must include the following files in the header area of the HTML. Please make sure that:
- station.settings.js is replaced with the path to your station's settings file created in Step 1.
- widget.design_bg.css can be replaced with any custom CSS design if you wish.
- Use these generic CSS files to get started:
- http://media.streamads.com/playersdk/v2/widgets/webplayer/widget1/widget.design_bg.css (Background Image/Black)
- http://media.streamads.com/playersdk/v2/widgets/webplayer/widget1/widget.design_a.css (Suited for white background)
- http://media.streamads.com/playersdk/v2/widgets/webplayer/widget1/widget.design_b.css (Suited for dark/black background)
<head> <script language="javascript" type="text/javascript" src="http://media.streamads.com/playersdk/v2/playersdk.js.gz"></script> <script language="javascript" type="text/javascript" src="http://media.streamads.com/playersdk/v2/widgets/webplayer/widget1/widget.js"></script> <script language="javascript" type="text/javascript" src="station.settings.js"></script> <link rel="stylesheet" type="text/css" href="http://media.streamads.com/playersdk/v2/widgets/webplayer/widget1/widget.design_bg.css" /> </head>
Step 3: Embed Widget into your webpage
The final step is to create the Widget Player in your HTML page at the exact location where you want it. This is done by using this javascript code:
<script language="javascript" type="text/javascript"> playerWidget.loadWidget_HTML(); </script>
ASX HTMLView Widget
Follow the same steps as for HTMLView Widget, but use this code to embed the Widget into your HTMLView page:
Note: Remember to create the syncPlayer object as below.
<OBJECT id="syncPlayer" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" style="display:none;"></OBJECT> <center> <script language="javascript" type="text/javascript"> playerWidget.loadWidget_ASX('syncPlayer'); </script> </center>
For those of you new to ASX HTMLView, here is a very basic example ASX file with HTMLView support:
<ASX version="3.0"> <PARAM name="HTMLView" value="http://media.streamads.com/playersdk/v2/widgets/webplayer/widget1/asxWidget_bg.html"/> <entry> <ref href = "http://wm5.spacialnet.com/science1/canned/canned-ps-a.wma" /> </entry> </ASX>
Known issues
No title / artist information, no banner ads, no overlay ads
Status: Fixed
Thie issue occured on Mozilla Firefox and Google Chrome where the SilverLight plugin was not installed. The player would fail to display title and artist information and banner or StreamAds overlay ads.
The player now displays a warning asking the user to upgrade to SilverLight, and falls back to Windows Media Player with AudioRealm datapoller support for artist and title information where available.
Artist / title information stops working, displays 'undefined'
Status: Confirmed
Last update: 16 September 2009
On some stations, the SilverLight version of the widget will stop displaying artist and title information after a few tracks and display 'untitled' for both.
This issue has been confirmed, but does not seem to affect all implementations. Development on a fix is ongoing.
