You can embed a Triton Digital Web Player in a web page. You configure it with a JSON object that specifies the modules to load. Each module provides features for the player.
Include the Web Player SDK
Include the following JavaScript library files in the body of your HTML page. For details, see SDK Endpoints.
<body>
...
<script src="//sdk.listenlive.co/web/2.9/td-sdk.min.js"></script>
</body>Configure and Embed the Media Player
This example configures and embeds a player in a web page:
The web player is configured with a JSON object, tdPlayerConfig. The main property of this JSON object is coreModules and contains the list of modules to load.
In this example, only the MediaPlayer module is defined, which specifies the div element td_container as the player’s container. For details, see JSON Configuration Object.
The media player instance is ready to be used when the function onPlayerReady is called.
To attach other listeners on the SDK, use the function addEventListener( eventName, callback ).
<!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 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 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 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 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 to notify when 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 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>Module: MediaPlayer
Live playback of audio and video with cue points and ads features.
Example:
{
id: 'MediaPlayer',
playerId: 'td_container'
}playerId
String. Required.
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.
playerId: 'td_container'
platformId
String.
Platform environment.
Default: 'prod01'
sbm
Object.
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.
Default value: true.
Activate / Deactivate HLS technology support (iOS only).
hls: true/false
forceHls
Boolean. Default value: false.
Force HLS technology support on all platforms.
forceHls: true/false
audioAdaptive
Boolean.
Activate / Deactivate Adaptive Audio support.
Default value: false.
audioAdaptive: true/false
idSync
Object. Required.
Cookie synchronization configuration object.
Five options are available to support Cookie synchronization: station, stationId, mount, gdpr, and gdpr_consent. Each option automatically appends a Javascript script to the page’s <body> element.
Example option | Appended script |
|---|---|
idSync: {station:'ABCDFM'} | <script type="text/javascript" src="http://playerservices.live.streamtheworld.com/api/idsync.js?station=ABCDFM"/> |
idSync:{stationId:12345} | <script type="text/javascript" src="http://playerservices.live.streamtheworld.com/api/idsync.js?stationId=12345"/> |
idSync:{mount:'ABCFMAAC'} | <script type="text/javascript" src="http://playerservices.live.streamtheworld.com/api/idsync.js?mount=ABCFMAAC"/> |
idSync: {gdpr: 0 | 1} 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.
The plugins array is specific to the MediaPlayer module. Each plugin contains ID (String) and other optional configurations. See MediaPlayer Plugins.
Example: plugins: [ {id:"vastAd"}, {id:"mediaAd"} ]
playerServicesRegion
String.
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:
European = eu
Asia = ap
Example: playerServicesRegion: "eu"
geoTargeting
Object.
Used to enable or disable geo-targeting.
Options:
Disabled: false
Enabled: true
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: {
desktop: {
isActive: true
},
iOS: {
isActive: true
},
android: {
isActive: true
}
}
streamWhileMuted
Object.
Used to enable or disable stream continuing to play when user mutes the audio. Default is false.
Options:
Disabled (stream stops when muted): false
Enabled (stream continues when muted, but user does not hear audio): true
burstTime
Number.
Minimum value: 1. Default value: 15.
Controls the initial burst buffer size, in seconds, for progressive HTTP streams. Specifies the number of seconds of audio the server should send in the initial burst. This parameter is appended to the stream URL as burst-time and is only effective for progressive streams (not HLS). Higher values provide better buffering for unstable connections but may increase initial load time. There is no upper limit, but setting it too high will cause performance issues. For related information, see Playback Buffer.
hlsBufferLength
Number.
Minimum value: 1. Default value: 30.
Controls the HLS.js buffer length in seconds. Specifies how much audio HLS.js will buffer ahead of the playhead for HLS streams. Higher values provide better protection against network interruptions but consume more memory. This setting only applies to HLS streams and has no effect on progressive streams. There is no upper limit, but setting it too high will cause performance issues.
Module: NowPlayingApi
Retrieves a stream playback history. Useful for song history.
Module: TargetSpot
Allows preroll ads, including syncing banner ads with audio ads and volume syncing the audio between the live stream and ad.
Module: SyncBanners
Required to display Ad Companions.
This module is required to display on-demand Ad Companions (Preroll). It listens for in-stream Ad breaks to display synchronized Ad Companions.
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.
Synchronized Ad Companions: both VAST In-Stream mid-roll and VAST / Legacy (Ando) synced banners.
The MediaPlayer vastAd plugin is required for VAST In-Stream.
Banner Capability Flag | Capability |
|---|---|
IAB Medium Rectangle (300x250) | 300x250 |
IAB Rectangle (180x150) | 180x150 |
IAB Leaderboard (728x90) | 728x90 |
IAB Wide Skyscraper (160x600) | 160x600 |
IAB Half Page (300x600) | 300x600 |
IAB Button 2 (120x60) | 120x60 |
IAB Microbar (88x31) | 88x31 |
IAB Smartphone Static Banner (300x50) | 300x50 |
IAB Smartphone Static Wide Banner (320x50) | 320x50 |
Example:
{
id: 'SyncBanners',
elements: [{
id: 'td_synced_bigbox',
width: 300,
height: 250
}, {
id: 'td_synced_leaderboard',
width: 728,
height: 90
}],
keepElementsVisible: false,
vastCompanionPriority: ['static', 'iframe', 'html']
}elements
Array. Required.
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 of the containing element in the page, a width, and a height.
keepElementsVisible
Boolean.
Set 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.
vastCompanionPriority
Array.
The priority order of companions type supported by the ad sync banners (VAST campaign): 'static', 'iframe', and 'html'.
Default: ['static','iframe','html'].
For VAST In-Stream, the MediaPlayer plugin "vastAd" is required.
MediaPlayer Plugins
Below is the list of the plugins currently supported by the MediaPlayer module.
Plugin: vastAd
The vastAd plugin is required if you want to play VAST/VPAID/VMAP/DAAST Ads in your player for preroll or VAST/DAAST for 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.
Plugin: mediaAd
The mediaAd plugin allows the playback of any media ad, audio or video.
The configuration of this plugin is straightforward. ust 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.