We are in the process of migrating the Spacial Wiki content to our new Help Center at spacial.com.
Please visit the Help Center for latest Tips and Tricks, Documentation and Troubleshooting.
spacial.com/help-center

PlayerSDK Tutorial1

From SpacialAudio

Jump to: navigation, search

Welcome to the first Player SDK tutorial. We hope to show you how quick it is to develop a powerful player solution with a minimal amount of coding. The goal of this example is not to make a pretty player, but a functional player.

If you follow the steps in this tutorial you will have created a player with the following features:

  • Dynamically load station information
  • Dynamically load song history
  • Dynamically load current track information if no in-stream metadata is available.
  • Display sync banners and text ads with in-stream audio ads.
  • The player is able to deliver 1-to-1 targeted audio ads (in-stream).
  • The player is able to deliver 1-to-1 targeted video ads (in-stream).
  • The player will support a wide ranges of installed player plugins (Silverlight, WMP, Flash, etc).
  • The player will support a wide range of browsers (IE, FireFox, Chrome, etc).

Contents

See it in action

Before we get started it might be best if you see what this example will do. If you are using a Mozilla browser like FireFox or Chrome make sure you have the latest version of SilverLight installed. Without it, the demo will be pretty unimpressive!

Once again this demo was not meant to be a pretty player, but show you the basics of how to use the player SDK. So keep that in mind while viewing this demo.

Tutorial 1 - Player Example

Ok, now that you have seen it - let's get into building your own version...

Step 1: Get listed at AudioRealm

This example depends a lot on AudioRealm to provide it with additional information like station data and track history data. Thus the very first step is to make sure your station is listed on AudioRealm. See this article for more information. Once you are listed on AudioRealm note down your AudioRealm stationID. (The easiest way to do this is to go to AudioRealm.com and search for your station. Then hover your mouse over the speaker icon(listen link) and look at the status bar of your browser. You will see something like javascript:player(12345,-1). The 12345 part is your stationID. Write it down.)

Important: The player SDK certainly does not require your station to list on AudioRealm. However, if you do list on AudioRealm, the Player SDK can automate a lot of tasks for you. In future tutorials we will cover how to work with a player not linked to AudioRealm.

Step 2: Include all the required external references

The Player SDK is written in 100% javascript so it does not require any server-side scripting languages like PHP, ASP or ASP.NET. Thus you can develop a player that takes very little server resources to deliver. In fact, the biggest resources required to make the SDK work is hosted by SpacialAudio - saving you a lot of costs and precious resources.

So the first thing you need to do is include the Player SDK in the header of your HTML page.

  1. <head>
  2. 	<title>Player Tutorial</title>
  3. 	<!-- Include the compressed javascript SDK code -->
  4. 	<script language="javascript" type="text/javascript" src="http://media.streamads.com/playersdk/v2/syncmeta.js.gz"></script>
  5. 	<link href="textad.css" rel="stylesheet" type="text/css" />
  6. </head>

Important: We do not recommend downloading the file and hosting it yourself. The main reason is if we happen to update the Player SDK with enhancements or bug fixes your player will be without them until you download and update the file on your end. We plan to make a LOT of changes to the Player SDK over the next few months, so its best to link direct and be certain you always have the latest version.

You will also note we included a textad.css file. This file is basically used to format and text ads to fit the look & feel of our player.

Step 3: Initialize all settings

We need to wait for the entire page to finish loading before we start using the player SDK. The biggest reason is that the player SDK needs to communicate with the HTML DOM and the DOM might not be ready before the page is fully loaded.

  1. <!-- We need to wait for the page to complete loading before we do our work - thus we assign a function to the body "onload" event -->
  2. <body onload="pageLoaded();" leftMargin="0" topMargin="0" marginwidth="0" marginheight="0">

Below you will find the pageLoaded(); javascript function.

  1. <script language="javascript" type="text/javascript">
  2. //##============================================================================
  3. //## INITIALIZATION
  4. //##============================================================================
  5. function pageLoaded()
  6. {
  7. 	doitall.stationID = 61540; //AudioRealm station ID
  8. 	doitall.publisherID = 13100; //StreamAds publisher ID [Only required for 1-to-1 targeting]
  9.  
  10. 	doitall.loadStationInfo = true; //Load station information from AudioRealm
  11. 	doitall.preloadHistory = true; //Load song history from AudioRealm
  12. 	doitall.useDataPoller = true; //Check for track changes using "polling" method (Data provided by AudioRealm)
  13. 	doitall.useLocalMedia = true; //Allow client-side targeted content
  14. 	doitall.RegisterVideoArea('idVideo'); //If you wish to display targeted video content you must register video area
  15. 	doitall.RegisterSyncIDs(null, null, "idTextAd"); //Register TextAd area (As DOM element)
  16. 	doitall.RegisterSyncFrames("frmAd300x250", "frmAd728x90", null); //Register cover/banner ads (AS IFRAME areas)
  17.  
  18. 	//Subscribe to events
  19. 	doitall.onMedia.subscribe(cbDisplayMedia);
  20. 	doitall.onAds.subscribe(cbDisplayAds);
  21. 	doitall.onHistoryLoaded.subscribe(cbHistoryLoaded); //Song history data from AudioRealm loaded
  22. 	doitall.onStationData.subscribe(cbStationData); //Station information from AudioRealm loaded
  23. 	doitall.player.onLoaded.subscribe(cbPlayerLoaded); //Player is loaded & ready to be controlled
  24. 	doitall.onVideoBegin.subscribe(cbVideoBegin); //Video playback is about to start
  25. 	doitall.onVideoEnd.subscribe(cbVideoEnd); //Video playback ended
  26. 	doitall.onRestore.subscribe(cbRestore); //Advertisement time-out triggered
  27.  
  28. 	//Create player
  29. 	doitall.player.mediaurl = 'http://wm5.spacialnet.com/science1/canned/canned-localmedia-v4.wma';
  30. 	doitall.mediadata.coverpicture_url = 'http://media.streamads.com/playersdk/v2/widgets/webplayer/arplayer/canned/';
  31. 	doitall.player.showcontrols = true;
  32. 	doitall.player.width=320;
  33. 	doitall.player.height=240;
  34. 	doitall.player.createPlayer('idPlayerSpace');
  35.  
  36. 	//Start all basic systems
  37. 	doitall.Start();
  38. }
  39. </script>

Here is the HTML part of the page:

  1. <table border="1" cellpadding="0" cellspacing="2">
  2. 	<tr>
  3. 		<td>
  4. 			<div id="idPlayerSpace"></div>
  5. 			<div id="idPlayercontrols" style="display: none;">
  6. 				<input type="button" value="Play" onclick="doitall.player.Play();">
  7. 				<input type="button" value="Stop" onclick="doitall.player.Stop();">
  8. 				<input type="button" value="Mute" onclick="doitall.player.toggleMute();">
  9. 				Volume: <input id="idVolume" type="text" size="1" value="0">% <input type="button" value="set" onclick="setVolume();">
  10. 			</div>
  11. 			<div id="idStatus"></div>
  12. 		</td>
  13. 		<td align="left" valign="top" width="320">
  14. 			<div id="idVideo" style="position: relative; left: 0px; top: 0px"></div>
  15. 		</td>
  16. 		<td id="tdAd300x250" style="display: none;">
  17. 			<!-- 300x250 "Cover Ad" area -->
  18. 			<iframe id="frmAd300x250" width=300 height=250 FRAMEBORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=no></iframe>
  19. 		</td>
  20. 		<td width="200" id="tdTextAd" style="display: none;">
  21. 			<!-- "Text Ad" area -->
  22. 			<div id="idTextAd" style="padding: 10px;" ></div>
  23. 		</td>
  24. 	</tr>
  25. 	<tr id="trAd728x90" style="display: none;">
  26. 		<td colspan="4" align="center" valign="middle">
  27. 			<!-- 728x90 "Banner Ad" area -->
  28. 			<iframe id="frmAd728x90" width=728 height=90 FRAMEBORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=no></iframe>
  29. 		</td>
  30. 	</tr>
  31. </table>
  32.  
  33. <br>
  34. <b>Metadata information:</b>
  35. <div id="idMetadata" style="overflow: scroll; width: 660px; height: 200px;"></div>
  36. <br>
  37. <b>Station information:</b>
  38. <div id="idStationData" style="overflow: scroll; width: 660px; height: 150px;"></div>

Let's go over the above in detail.

Setting AudioRealm stationID

First thing we set is the stationID. The stationID is your AudioRealm stationID (as discussed in Step 1 above). Because you have specified a stationID you can now enable some automated features:

  • By setting doitall.loadStationInfo to TRUE, the SDK will contact AudioRealm and ask it to send back the station name, description, logo picture, etc. and trigger the doitall.onStationData event when the data arrives.
  • By setting doitall.preloadHistory to TRUE, the SDK will contact AudioRealm and ask it to send a list of the most recently played songs and store it in the history. The SDK will trigger the doitall.onHistoryLoaded event as soon as the data arrives.
  • By setting the doitall.useDataPoller to TRUE, the SDK will contact AudioRealm at regular intervals (15s to 20s) and ask it to send information about the currently playing track. As soon as it is detected that the stream contains in-stream metadata the DataPoller will be stopped as all metadata can then be obtained from the stream.

Whenever new metadata arrives the onMedia, onAds and onData events are triggered (It does not matter if the data arrives via the DataPoller or via in-stream scripts). onData is always triggered, but onAds are only triggered if the songtype=A and onMedia when songtype<>A.

Setting StreamAds advertisement settings

Next you will notice we set the publisherID. This is only required if you wish to support client-side 1-to-1 targeting of both video and audio ads. For more information about StreamAds, please visit StreamAds.com. Note: For testing purposes feel free to use the publisherID of 13100.

To enable 1-to-1 targeting you must set doitall.useLocalMedia to TRUE. If you also wish to support video ads, you must register a video area - basically an HTML DOM element where video ads may be displayed. This is done by this command - doitall.RegisterVideoArea('idVideo');

Important: This video area may never be hidden or moved. However, it may be re-sized to 1x1 pixels while no video ads are playing. (Moving or making the video space invisible will cause the video players to reload and break.)

Next we register the areas where synchronized banners and text ads will be displayed.

  1. doitall.RegisterSyncIDs(null, null, "idTextAd"); //Register TextAd area (As DOM element)
  2. doitall.RegisterSyncFrames("frmAd300x250", "frmAd728x90", null); //Register cover/banner ads (AS IFRAME areas)

The RegisterSyncIDs method registers a DOM element by name (usually a DIV or SPAN element) where the advertisement must be displayed. We usually use this style of display for textads only. The big reason is then we are able to control the look & design of the textad with our own custom CSS. Notice we pass two null values - the first is for the cover-ad space and the second for the banner-ad space. Passing null values indicates that these spaces are not available.

The RegisterSyncFrames methods registers IFRAME areas by name where advertisements must be displayed. In this example we register both a cover-ad IFRAME and a banner-ad IFRAME.

By registering advertisement areas the SDK will automatically display advertisements for you in those areas. In some cases you will need to have more control over the process and display advertisements manually. In later tutorials we will cover how this is done.

Setting up event handlers

Event handlers were mentioned previously, but we will cover them in more detail here. The SDK is fully event driven meaning that your player must simply subscribe to certain events and your code will be executed when those events occur.

Subscribing to event handlers

Lets quickly list all the events we use in this example again. We are certainly not using all available events so make sure to check out the programming reference for full details.

  1. //Subscribe to events
  2. doitall.onMedia.subscribe(cbDisplayMedia);
  3. doitall.onAds.subscribe(cbDisplayAds);
  4. doitall.onHistoryLoaded.subscribe(cbHistoryLoaded); //Song history data from AudioRealm loaded
  5. doitall.onStationData.subscribe(cbStationData); //Station information from AudioRealm loaded
  6. doitall.player.onLoaded.subscribe(cbPlayerLoaded); //Player is loaded & ready to be controlled
  7. doitall.onVideoBegin.subscribe(cbVideoBegin); //Video playback is about to start
  8. doitall.onVideoEnd.subscribe(cbVideoEnd); //Video playback ended
  9. doitall.onRestore.subscribe(cbRestore); //Advertisement time-out triggered

We already talked about the onMedia, onAds, onHistoryLoaded and onStationData events so we will limit the discussion here to those events not yet mentioned.

  • doitall.player.onLoaded
    This event is called as soon as the player is done loading and ready to be used. It is very important to note that both the Flash and Silverlight player needs to load an external resource before they are functional. The Windows Media player is the only object that is instantly ready to be used. In short you CAN NOT immediately start using the player object right after it is created. You must wait for the onLoaded event to fire before you start using the player.
  • doitall.onVideoBegin and doitall.onVideoEnd
    These events are called respectively when a video advertisement is about to be shown or when a video advertisement has played till the end. You can use these events to take special action - usually to hide or move content that is currently occupying the video space. We mentioned this before but will mention it again - never hide the video space completely or move it around. This will cause players to reload and break the functionality.
  • doitall.onRestore
    This event is called a few seconds after the last advertisement played (around 15seconds afterward by default). On this event you should clean up the player from sync advertisement content. Basically, hide all sync advertisements or replace them with other content. You can for example change the IFRAMEs to display banners from other sources. (See our IFRAME rotation tutorial)

Setting up Player object

Our player object is initialized be the following code:

  1. //Create player
  2. doitall.player.mediaurl = 'http://wm5.spacialnet.com/science1/canned/canned-localmedia-v4.wma';
  3. doitall.mediadata.coverpicture_url = 'http://media.streamads.com/playersdk/v2/widgets/webplayer/arplayer/canned/';
  4. doitall.player.showcontrols = true;
  5. doitall.player.width=320;
  6. doitall.player.height=240;
  7. doitall.player.createPlayer('idPlayerSpace');
  • doitall.player.mediaurl
    If you have specified a stationID, this line is not needed. The SDK will automatically generate an ASX file for your station that will allow listeners to tune into your station. You can however specifically set the mediaurl to point to your own ASX playlist file. In this example we are pointing it to a "canned demo" audio file. This Windows Media file contains embedded scripts that simulate a live station, making it ideal for testing during development.
  • doitall.mediadata.coverpicture_url
    In order to display album cover art pictures one must specify where those pictures are stored on the internet. Usually the SDK can automatically detect this setting from AudioRealm. However, since we are using the "canned demo" audio file from the above link we need to hard-code this URL so it is able to find the album cover art pictures meant to be used with this audio file.
    Note that we won't actually be displaying these album cover pictures in this demo, but you will see the data contained in the output on the page for songs. (See next tutorials for examples that does indeed display album cover pictures)
  • doitall.player.showcontrols
    Setting this to true will force the player to show its own controls. Usually you would want to set this to FALSE and provide your own method of controlling the player. In this example we set it to true for demonstration purposes only.
  • doitall.player.width and doitall.player.height
    These are pretty easy ... sets the size of the player. In many cases you will simply set the player to a size of 1x1 to make it nearly invisible. You should never hide the player completely as this will stop the player.
  • doitall.player.createPlayer('idPlayerSpace');
    This command will actually create the player object in the player space specified. (If none is specified the player will be added to the bottom of the webpage).

Step 4: Implementing event handlers

In the section Setting up event handlers we discussed how we subscribed our events to our event handler functions. The real work is done by the event handlers - see code listing below.

  1. //##============================================================================
  2. //## EVENT HANDLERS
  3. //##============================================================================
  4. function cbDisplayMedia(type, args, me)
  5. {
  6. 	var media = args[0];
  7. 	DisplayItem(media);
  8. }
  9.  
  10. function cbDisplayAds(type, args, me)
  11. {
  12. 	var ad = args[0];
  13. 	DisplayItem(ad);
  14.  
  15. 	//Make the advertisement areas visible
  16. 	setVisibility("tdAd300x250", (ad['coverID']>0));
  17. 	setVisibility("trAd728x90", (ad['bannerID']>0));
  18. 	setVisibility("tdTextAd", (ad['textID']>0));
  19. }
  20.  
  21. function cbHistoryLoaded(type, args, me)
  22. {
  23. 	DisplayHistory();
  24. }
  25.  
  26. function cbStationData(type, args, me)
  27. {
  28. 	var stationdata = args[0];
  29. 	DisplayStation(stationdata);
  30. }
  31.  
  32. function cbPlayerLoaded(type, args, me)
  33. {
  34. 	//Only show controls if we are able to control player
  35. 	if(doitall.player.isControllable())
  36. 	{
  37. 		//Make our own custom player controls visible
  38. 		setVisibility('idPlayercontrols', true);
  39.  
  40. 		//Set the initial player volume
  41. 		var idVolume = document.getElementById('idVolume');
  42. 		idVolume.value = doitall.player.getVolume();
  43.  
  44. 		//Start timer to update status regularly
  45. 		setInterval(cbUpdateStatus, 500);
  46. 	}
  47. }
  48.  
  49. function cbUpdateStatus()
  50. {
  51. 	var code = doitall.player.getPlayerStatus();
  52. 	var msg  = doitall.player.getStatusMessage();
  53. 	DynWrite("idStatus", 'Status: ('+code+') '+msg);
  54. }
  55.  
  56. function cbVideoBegin(type, args, me)
  57. {
  58. 	//Video about to start...
  59. }
  60.  
  61. function cbVideoEnd(type, args, me)
  62. {
  63. 	//Video about to ended
  64. }
  65.  
  66. function cbRestore(type, args, me)
  67. {
  68. 	//Accompanying banners and text should be removed at this point
  69. 	//if we have something better to display
  70. 	//In this case we simply hide the advertisement areas
  71. 	//as we really have nothing better to do with them
  72. 	setVisibility("tdAd300x250", false);
  73. 	setVisibility("trAd728x90", false);
  74. 	setVisibility("tdTextAd", false);
  75. }

Let's analyze what each of them does in a bit more detail:

  • cbDisplayMedia
    This event is called when any non-advertisement content is played, like songs or news. This event extracts the metadata from the args array and then passes it to DisplayItem to display. (See full listing at bottom of this article to see actual DisplayItem function code)
  • cbDisplayAds
    This event is called when any advertisement content is played. This event extracts the metadata from the args array and then passes it to DisplayItem to display. (See full listing at bottom of this article to see actual DisplayItem function code)
    Also, the ad information is checked to see what kinds of synchronized content is available and those areas with ads are then made visible.
  • cbHistoryLoaded
    This event is called as soon as history data is retrieved from AudioRealm. We simply call DisplayHistory to display the history data on the webpage. (See full listing at bottom of this article to see actual DisplayHistory function code).
  • cbStationData
    This event is called as soon as station information is successfully loaded from AudioRealm. The DisplayStation function is called to display the raw station information on the webpage. (See full listing at bottom of this article to see actual DisplayStation function code). Notice how the station information is extracted from the args array.
  • cbPlayerLoaded
    This is called as soon as the player is done loading and is ready. The first thing we do is check if the player is controllable (doitall.player.isControllable()). The only case where the player will not be controllable is on a Mozilla browser (like FireFox or Chrome) and they do not have the SilverLight plugin installed, forcing us to use the Windows Media Player plugin. Unfortunately due to security reasons the browser does not allow the javascript to communicate with the player.
    If we detect the player is indeed controllable, we do three things
    • Make our custom player controls visible
    • Set the initial value of the volume edit box
    • Start a timer to update a status message regularly
  • cbUpdateStatus
    This event is called by the setInterval timer initialized in the cbPlayerLoaded event handler. This function reads the status code and status message from the player and displays it on the website.
  • cbVideoBegin and cbVideoEnd
    These two event handlers were just added for the sake of demonstration. We do not use them in this example.
  • cbRestore
    This is called after in-stream ads have played and it's time to clean up any synchronized banners and text ads. In this example we simply hide all advertisement areas, but in your player you will most likely want to display some other content in these areas instead.

Step 5: Controlling the player

Controlling the player object is really simple. This code snippet basically explains everything:

  1. <div id="idPlayercontrols" style="display: none;">
  2. 	<input type="button" value="Play" onclick="doitall.player.Play();">
  3. 	<input type="button" value="Stop" onclick="doitall.player.Stop();">
  4. 	<input type="button" value="Mute" onclick="doitall.player.toggleMute();">
  5. 	Volume: <input id="idVolume" type="text" size="1" value="0">% <input type="button" value="set" onclick="setVolume();">
  6. </div>

Play, Stop and toggleMute is called directly on the player object.

Setting the volume was moved to a javascript function as it is slightly more complicated. It basically finds the Volume input edit box element and then changes the volume to value specified in the Volume input edit box. (Note: There is no error checking, so entering an invalid number will cause problems)

  1. function setVolume()
  2. {
  3. 	var idVolume = document.getElementById('idVolume');
  4. 	doitall.player.setVolume(idVolume.value);
  5. }

Note: Initialize the controls are set invisible with style="display: none;" and only made visible in the player.onLoaded event once it is verified the player is indeed controllable.

Full code listing

  • Note: Replace [html] and [/html] with actual HTML tags. Unfortunately our wiki does not allow posting of these tags.
  1. [html]
  2. 	<head>
  3. 		<title>Player Tutorial</title>
  4. 		<!-- Include the compressed javascript SDK code -->
  5. 		<script language="javascript" type="text/javascript" src="http://media.streamads.com/playersdk/v2/syncmeta.js.gz"></script>
  6. 		<link href="textad.css" rel="stylesheet" type="text/css">
  7. 	</head>
  8.  
  9. <!-- We need to wait for the page to complete loading before we do our work - thus we assign a function to the body "onload" event -->
  10. <body onload="pageLoaded();" leftMargin="0" topMargin="0" marginwidth="0" marginheight="0">
  11.  
  12. <table border="1" cellpadding="0" cellspacing="2">
  13. 	<tr>
  14. 		<td>
  15. 			<div id="idPlayerSpace"></div>
  16. 			<div id="idPlayercontrols" style="display: none;">
  17. 				<input type="button" value="Play" onclick="doitall.player.Play();">
  18. 				<input type="button" value="Stop" onclick="doitall.player.Stop();">
  19. 				<input type="button" value="Mute" onclick="doitall.player.toggleMute();">
  20. 				Volume: <input id="idVolume" type="text" size="1" value="0">% <input type="button" value="set" onclick="setVolume();">
  21. 			</div>
  22. 			<div id="idStatus"></div>
  23. 		</td>
  24. 		<td align="left" valign="top" width="320">
  25. 			<div id="idVideo" style="position: relative; left: 0px; top: 0px"></div>
  26. 		</td>
  27. 		<td id="tdAd300x250" style="display: none;">
  28. 			<!-- 300x250 "Cover Ad" area -->
  29. 			<iframe id="frmAd300x250" width=300 height=250 FRAMEBORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=no></iframe>
  30. 		</td>
  31. 		<td width="200" id="tdTextAd" style="display: none;">
  32. 			<!-- "Text Ad" area -->
  33. 			<div id="idTextAd" style="padding: 10px;" ></div>
  34. 		</td>
  35. 	</tr>
  36. 	<tr id="trAd728x90" style="display: none;">
  37. 		<td colspan="4" align="center" valign="middle">
  38. 			<!-- 728x90 "Banner Ad" area -->
  39. 			<iframe id="frmAd728x90" width=728 height=90 FRAMEBORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=no></iframe>
  40. 		</td>
  41. 	</tr>
  42. </table>
  43.  
  44. <br>
  45. <b>Metadata information:</b>
  46. <div id="idMetadata" style="overflow: scroll; width: 660px; height: 200px;"></div>
  47. <br>
  48. <b>Station information:</b>
  49. <div id="idStationData" style="overflow: scroll; width: 660px; height: 150px;"></div>
  50.  
  51. <!-- ======================================================================= -->
  52. <script language="javascript" type="text/javascript">
  53. //##============================================================================
  54. //## INITIALIZATION
  55. //##============================================================================
  56. function pageLoaded()
  57. {
  58. 	doitall.stationID = 61540; //AudioRealm station ID
  59. 	doitall.publisherID = 13100; //StreamAds publisher ID [Only required for 1-to-1 targeting]
  60.  
  61. 	doitall.loadStationInfo = true; //Load station information from AudioRealm
  62. 	doitall.preloadHistory = true; //Load song history from AudioRealm
  63. 	doitall.useDataPoller = true; //Check for track changes using "polling" method (Data provided by AudioRealm)
  64. 	doitall.useLocalMedia = true; //Allow client-side targeted content
  65. 	doitall.RegisterVideoArea('idVideo'); //If you wish to display targeted video content you must register video area
  66. 	doitall.RegisterSyncIDs(null, null, "idTextAd"); //Register TextAd area (As DOM element)
  67. 	doitall.RegisterSyncFrames("frmAd300x250", "frmAd728x90", null); //Register cover/banner ads (AS IFRAME areas)
  68.  
  69. 	//Subscribe to events
  70. 	doitall.onMedia.subscribe(cbDisplayMedia);
  71. 	doitall.onAds.subscribe(cbDisplayAds);
  72. 	doitall.onHistoryLoaded.subscribe(cbHistoryLoaded); //Song history data from AudioRealm loaded
  73. 	doitall.onStationData.subscribe(cbStationData); //Station information from AudioRealm loaded
  74. 	doitall.player.onLoaded.subscribe(cbPlayerLoaded); //Player is loaded & ready to be controlled
  75. 	doitall.onVideoBegin.subscribe(cbVideoBegin); //Video playback is about to start
  76. 	doitall.onVideoEnd.subscribe(cbVideoEnd); //Video playback ended
  77. 	doitall.onRestore.subscribe(cbRestore); //Advertisement time-out triggered
  78.  
  79. 	//Create player
  80. 	doitall.player.mediaurl = 'http://wm5.spacialnet.com/science1/canned/canned-localmedia-v4.wma';
  81. 	doitall.mediadata.coverpicture_url = 'http://media.streamads.com/playersdk/v2/widgets/webplayer/arplayer/canned/';
  82. 	doitall.player.showcontrols = true;
  83. 	doitall.player.width=320;
  84. 	doitall.player.height=240;
  85. 	doitall.player.createPlayer('idPlayerSpace');
  86.  
  87. 	//Start all basic systems
  88. 	doitall.Start();
  89. }
  90.  
  91. //##============================================================================
  92. //## EVENT HANDLERS
  93. //##============================================================================
  94. function cbDisplayMedia(type, args, me)
  95. {
  96. 	var media = args[0];
  97. 	DisplayItem(media);
  98. }
  99.  
  100. function cbDisplayAds(type, args, me)
  101. {
  102. 	var ad = args[0];
  103. 	DisplayItem(ad);
  104.  
  105. 	//Make the advertisement areas visible
  106. 	setVisibility("tdAd300x250", (ad['coverID']>0));
  107. 	setVisibility("trAd728x90", (ad['bannerID']>0));
  108. 	setVisibility("tdTextAd", (ad['textID']>0));
  109. }
  110.  
  111. function cbHistoryLoaded(type, args, me)
  112. {
  113. 	DisplayHistory();
  114. }
  115.  
  116. function cbStationData(type, args, me)
  117. {
  118. 	var stationdata = args[0];
  119. 	DisplayStation(stationdata);
  120. }
  121.  
  122. function cbPlayerLoaded(type, args, me)
  123. {
  124. 	//Only show controls if we are able to control player
  125. 	if(doitall.player.isControllable())
  126. 	{
  127. 		//Make our own custom player controls visible
  128. 		setVisibility('idPlayercontrols', true);
  129.  
  130. 		//Set the initial player volume
  131. 		var idVolume = document.getElementById('idVolume');
  132. 		idVolume.value = doitall.player.getVolume();
  133.  
  134. 		//Start timer to update status regularly
  135. 		setInterval(cbUpdateStatus, 500);
  136. 	}
  137. }
  138.  
  139. function cbUpdateStatus()
  140. {
  141. 	var code = doitall.player.getPlayerStatus();
  142. 	var msg  = doitall.player.getStatusMessage();
  143. 	DynWrite("idStatus", 'Status: ('+code+') '+msg);
  144. }
  145.  
  146. function cbVideoBegin(type, args, me)
  147. {
  148. 	//Video about to start...
  149. }
  150.  
  151. function cbVideoEnd(type, args, me)
  152. {
  153. 	//Video about to ended
  154. }
  155.  
  156. function cbRestore(type, args, me)
  157. {
  158. 	//Accompanying banners and text should be removed at this point
  159. 	//if we have something better to display
  160. 	//In this case we simply hide the advertisement areas
  161. 	//as we really have nothing better to do with them
  162. 	setVisibility("tdAd300x250", false);
  163. 	setVisibility("trAd728x90", false);
  164. 	setVisibility("tdTextAd", false);
  165. }
  166.  
  167. //##============================================================================
  168. //## WORKER FUNCTIONS
  169. //##============================================================================
  170. function setVolume()
  171. {
  172. 	var idVolume = document.getElementById('idVolume');
  173. 	doitall.player.setVolume(idVolume.value);
  174. }
  175.  
  176. //This function deletes all the nodes in a DOM tree starting at specified node
  177. function DeleteAllChildren(domObj)
  178. {
  179. 	var child = domObj.firstChild;
  180. 	while(child != null)
  181. 	{
  182. 		domObj.removeChild(child);
  183. 		child = domObj.firstChild;
  184. 	}
  185. }
  186.  
  187. function DisplayItem(item)
  188. {
  189. 	var idMetadata = document.getElementById('idMetadata');
  190. 	DeleteAllChildren(idMetadata);
  191.  
  192. 	for (var key in item) //Iterate through all the values the item exposes
  193. 	{
  194. 		var display = key+": "+item[key];
  195.  
  196. 		var objDiv = document.createElement('div');
  197. 		var objText = document.createTextNode(display);
  198. 		objDiv.appendChild(objText);
  199. 		idMetadata.appendChild(objDiv);
  200. 	}
  201. }
  202.  
  203. function DisplayStation(item)
  204. {
  205. 	var idStationData = document.getElementById('idStationData');
  206. 	DeleteAllChildren(idStationData);
  207.  
  208. 	for (var key in item) //Iterate through all the values the item exposes
  209. 	{
  210. 		var display = key+": "+item[key];
  211.  
  212. 		var objDiv = document.createElement('div');
  213. 		var objText = document.createTextNode(display);
  214. 		objDiv.appendChild(objText);
  215. 		idStationData.appendChild(objDiv);
  216. 	}
  217. }
  218.  
  219. function DisplayHistory()
  220. {
  221. 	var list = doitall.mediadata.getMediaHistory(1, "S,A"); //Return one item with songtype of A or S (Advertisement or Normal song)
  222. 	for(var i=0; i<list.length; i++) //Iterate through all the items returned (Should only be 1)
  223. 	{
  224. 		DisplayItem(list[i]);
  225. 	}
  226. }
  227. </script>
  228.  
  229. </body>
  230. [/html]

Related links

Personal tools