Web Player SDK JavaScript File
Include the following JavaScript library files in the body of your HTML page:
<body>
[....]
<script
src="//sdk.listenlive.co/web/2.9/td-sdk.min.js"></script>
</body>Configure and Embed the Media Player
Include the JavaScript and HTML code from the following example:
<!DOCTYPE html>
<html>
<head>
<title>TD Web Player SDK 2.9 - Simple implementation demo</title>
</head>
<body>
<!-- Player container -->
<div id="td_container"></div>
<!-- Now Playing information -->
<div id="onair"></div>
<script>
var player;
function initPlayerSDK()
{
console.log( 'TD Player SDK is ready' );
//Player SDK is ready to be used, this is where you can instantiate a new TDSdk instance.
//Player configuration: list of modules
var tdPlayerConfig = {
coreModules: [{
id: 'MediaPlayer',
playerId: 'td_container'
}],
playerReady: onPlayerReady,
configurationError: onConfigurationError,
moduleError: onModuleError,
adBlockerDetected: onAdBlockerDetected
};
//Player instance
player = new TDSdk( tdPlayerConfig );
}
/* Callback function called to notify that the SDK is ready to be used */
function onPlayerReady()
{
//Listen for 'track-cue-point' event
player.addEventListener( 'track-cue-point', onTrackCuePoint );
//Play the stream: station is TRITONRADIOMUSIC
player.play( {station:'TRITONRADIOMUSIC'} );
}
/* Callback function called to notify that the player configuration has an error. */
function onConfigurationError( e ) {
console.log(object);
console.log(object.data.errors);
//Error code : object.data.errors[0].code
//Error message : object.data.errors[0].message
}
/* Callback function called to notify that a module has not been loaded properly */
function onModuleError( object )
{
console.log(object);
console.log(object.data.errors);
//Error code : object.data.errors[0].code
//Error message : object.data.errors[0].message
}
/* Callback function called to notify that a new Track CuePoint comes in. */
function onTrackCuePoint( e )
{
console.log( 'onTrackCuePoint' );
console.log( e.data.cuePoint );
//Display now playing information in the "onair" div element.
document.getElementById('onair').innerHTML = 'Artist: ' + e.data.cuePoint.artistName + '<BR>Title: ' + e.data.cuePoint.cueTitle;
}
/* Callback function called to notify that an Ad-Blocker was detected */
function onAdBlockerDetected()
{
console.log( 'AdBlockerDetected' );
}
</script>
<script src="//sdk.listenlive.co/web/2.9/td-sdk.min.js"></script>
<script>initPlayerSDK();</script>
</body>
</html>The tdPlayerConfig object contains the list of modules to load. In the previous example, only the MediaPlayer module is defined, and the div element td_container is used as the player container.
As soon as the callback function onPlayerReady is fired, the media player instance is ready to be used.
To attach other listeners on the SDK, use the function addEventListener( eventName, callback )
For more information about JavaScript integration of the SDK, see JavaScript SDK Reference.
JavaScript Configuration Object Structure
The Triton Digital Web Player SDK 2.9 is configurable with a JSON object. The main property of this JSON object is coreModules and contains the list of modules to load.
Definition of the "coreModules" Object
Each module (JavaScript object) included in coreModules corresponds to a player feature. The currently available modules in the SDK, along with their IDs, are described briefly below. They are described in detail in “Modules List Definition and Configuration."
- MediaPlayer: Live audio/video stream playback with cue points and ads features.
- NowPlayingApi: Retrieves a stream playback history. Useful for song history.
- SyncBanners: This module is requiredto display Ad Companions.
- oit is required to display on-demand Ad Companions (Preroll).
- it listens for in-stream Ad breaks in order to display synchronized Ad Companions* (see Banner Capability Flags for banner capabilities)
Synchronized Ad Companions: both VAST In-Stream mid-roll and VAST / Legacy (Ando) synced banners. (Note: The MediaPlayer "vastAd" plugin is required for VAST In-Stream).
The synchronized Ad Companions are displayed when receiving an ad-break cue point.
The SyncBanners module handles the process, so all you have to do is configure the module by specifying the list of ad elements in your page (div IDs and dimensions).
Every time an Ad companion is displayed "ad-break-synced-element" event id fired. At the end of an Ad Break, a "ad-break-cue-point-complete" event is fired. You can listen this event in order to hide Ad companions divs, if necessary, in your player page.
Modules List Definition and Configuration
Module ID | Properties and Definition | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
MediaPlayer | playerId (String). Required: Yes DOM Element used to embed the media player. To be able to display video ads (preroll or video mid-rolls), you must define the CSS stylesheet on the playerId div element in the page. The SDK itself does not change any CSS stylesheet on the playerId div element, it is your responsibility to define the CSS stylesheet corresponding to your own integration. Example: when a preroll is playing, show the playerId element in the page, then when the live audio is playing, you can hide the playerId div element. Register callbacks on the SDK events (ad-playback-start, ad-playback-complete, stream-start) to define the CSS styles at the right time. Example: playerId: 'td_container' | ||||||||||||||||||||
platformId (String). Required: No Platform environment - By default: 'prod01' Example: platformId:'preprod01' | |||||||||||||||||||||
sbm (Object). Required: No. Sideband Metadata configuration object. If your station does not support Sideband metadata technology, set it to false. Then, stream data will be received via aSyncCuePoint technology (polling). If you don't want to receive data at all, set aSyncCuePointFallback to false. sbm:{ active:true/false, aSyncCuePointFallback:true/false } | |||||||||||||||||||||
hls (Boolean). Required: No. Default value: true. Activate / Deactivate HLS technology support (iOS only). hls: true/false | |||||||||||||||||||||
forceHls (Boolean). Required: No. Default value: false. Force HLS technology support on all platforms. forceHls: true/false | |||||||||||||||||||||
forceHlsts (Boolean). Required: No. Default value: false. Force HLSTS technology support on all platforms. forceHlsts: true/false | |||||||||||||||||||||
audioAdaptive (Boolean). Required: No. Default value: false. Activate / Deactivate Adaptive Audio support. audioAdaptive: true/false | |||||||||||||||||||||
idSync (Object). Required: Yes. Cookie synchronization configuration object. Five options are available to support Cookie synchronization: station name, station Id, mount, gdpr, and gdpr_consent. idSync:{station:'ABCDFM'} idSync:{stationId:12345} idSync:{mount:'ABCFMAAC'} idSync: {gdpr: 0 | 1} States whether or not GDPR applies. idSync: {gdpr_consent: 'consent string goes here'} Encodes the consented-to purposes and vendor consent string, as obtained from the IAB Transparency and Consent Framework CMP JS API. The result of the scripts that are to be loaded would be the above station identification followed by the two GDPR parameters: <script type="text/javascript" src="http://playerservices.live.streamtheworld.com/api/idsync.js?stationId=<stationId>[&gdpr=<gdpr>&gdpr_consent=<gdpr_consent>]</script> | |||||||||||||||||||||
plugins (Array). Required: No. The plugins array is specific to the MediaPlayer module. Each plugin contains ID (String) and other optional configurations. Example: plugins: [ {id:"vastAd"}, {id:"mediaAd"} ] | |||||||||||||||||||||
Module definition in coreModules object: { | |||||||||||||||||||||
playerServicesRegion (String). Required: No. When the SDK loads, it gets its station configuration from our provisioning servers. To speed up the process, we have provisioning servers in several regions including North America, Europe, and Asia. For best results, use the provisioning servers that are closest to your stations. The default provisioning region is North America; to use one of the other regions, specify it using the playerServicesRegion property as seen in the example below. Options:
Example: playerServicesRegion: "eu" | |||||||||||||||||||||
geoTargeting (Object). Required: No. Used to enable or disable geo-targeting. Options:
If the geoTargeting property is not used, then geo-targeting is enabled by default for desktop only. To enable geo-targeting for mobile, the property must be present along with the true option for mobile, as shown in the example below. geoTargeting: { | |||||||||||||||||||||
streamWhileMuted (Object). Required: No. Used to enable or disable stream continuing to play when user mutes the audio. Default is false. Options:
| |||||||||||||||||||||
NowPlayingApi | Module definition in coreModules object: { id: 'NowPlayingApi' } | ||||||||||||||||||||
TargetSpot | Module definition in coreModules object: { id: 'TargetSpot' } | ||||||||||||||||||||
SyncBanners | elements (Array). Required: Yes. keepElementsVisible (Boolean). Required: No. vastCompanionPriority (Array). Required: No The elements object defines the list of external HTML elements in the page that are used as placeholders to display the Ad Companions. Each element must define an ID (i.e. the div ID in the page); a width and a height. The keepElementsVisible property is Boolean (true or false): Set it to true to keep synced ad banners in the page after the end of the ad’s break duration. Set it to false to hide ad synced banners at the end of the ad’s break duration. The vastCompanionPriority property defined the priority order of companions type supported ('static', 'iframe', 'html') by the ad sync banners (VAST campaign). Module definition in coreModules object: { id: 'SyncBanners', keepElementsVisible:false, elements:[{id:'td_synced_bigbox', width:300, height:250}, {id:'td_synced_leaderboard', width:728, height:90}], vastCompanionPriority:['static','iframe','html'] } For VAST In-Stream, the MediaPlayer plugin "vastAd" is required.
|
MediaPlayer Module: Plugins List Definition
Below is the list of the plugins currently supported by the MediaPlayer module.
| ID | Definition |
|---|---|
vastAd | This plugin is required if you want to play VAST/VPAID/VMAP/DAAST Ads in your player for preroll and/or VAST/DAAST In-Stream. It supports both VAST 1.0 / VAST 2.0 / VMAP / DAAST 1.0. The plugin supports VAST/DAAST wrappers, audio/video inline Ads, and Companion Ads. This plugin must be used to access the VAST/DAAST Ad campaigns (TritonRunSpot V4.0+ and Tap). Capabilities of this plugin: Ad playback start / Ad playback complete / Ad countdown / Play ad / Skip Ad. |
mediaAd | The Media Ad plugin allows the playback of any media ad (audio/video). The configuration of this plugin is straightforward; just provide the mediaAd URL and an optional external link. Capabilities of this plugin: Ad playback start / Ad playback complete / Ad countdown / Play ad / Skip Ad. |