Media Player Widget
The Triton Digital Media Player Widget allows publishers to easily play their station's stream directly on their site.
Features
- Player Controls - Play, stop, and volume controls.
- Now Playing - Displays track metadata: artist, song title, album and corresponding artwork, with option to set a default cover image (i.e., a brand image instead of album art).
- Flexible UI - Responsive layout that can be placed where ever you want on the page: player bar at the top or bottom of your site, or an in-page player.
- Customizable - Choose colors for your widget that match your brand.
- Simple Configuration - A single script to add to your site with various attributes to customize your player.
- Advertising Options - Easily display companion banners to accompany your in-stream audio ads, and/or use in conjunction with our Ad Player Widget to play video pre-rolls from the Triton Advertising Platform (Tap).
Prerequisite
Before adding the Media Player Widget element to your pages, you'll need to add the following code snippet (JavaScript) to the bottom of your page or site template (inside the <body>
tags).
<script src="//widgets.listenlive.co/1.0/tdwidgets.min.js"></script>
Script Tag Attributes
Parameter | Description | Default | Required |
---|---|---|---|
td-lang | Language. Supported values : en (English), es (Spanish), pt (Portuguese), fr (French) | en | none |
Configuration
When embedding the Media Player Widget on your site, keep in mind that it is designed to fit within the dimensions of the the element <div>
where it's embedded. The TD Media Player Widget has it's own element <td-player></td-player>
and can be included anywhere in your page or site template.
Use the attributes below to configure and customize your widget to suit your needs.
Attributes
Parameter | Description | Default | Required |
---|---|---|---|
id | Element ID for internal reference. | none | yes |
station or mount | Specify station or mount. If you add both attributes, only "station" is used. | none | yes |
type | Choose from four display options; either "mini", "bar", "classic", or "vertical". | classic | no |
thirdpartylookup | Allows third party lookups e.g. iTunes. Default to true | true | no |
itunesaffiliateid* | Your iTunes Affiliate ID | true | no |
itunescountry* | The two-letter country code for the store you want to search. | us | no |
defaultcoverart* | Specify the URL and dimensions for an image that fills the album art space. We recommend using a square image. | Triton Default Image | no |
highlightcolor | Color used for mouse-over and highlight elements. Specify hex value; e.g.: #FFFFFF | #18a7e0 | no |
primarycolor | The color for all text and default element states. Specify the hex value; e.g.: #FFFFFF | #565656 | no |
secondarycolor | The color for all background and more. Specify hex value; e.g.: #FFFFFF | #565656 | no |
autostart | Specify whether or not the player should "autostart" when it initializes. Can be "true" or "false" | false | no |
leaderboard | Enter the DOM element ID in which in-stream ad companion leaderboard banners will be displayed. Must be 728x90 px. | none | no |
mediumrectangle | Enter the DOM element ID in which in-stream ad companion medium rectangle (big box) banners will be displayed. Must be 300x250 px. | none | no |
trackingparameters | Add tracking parameter values to the stream URL. They are used to log information from the player. It's like a json format; e.g. {'key':'value','key2': 'value2'} | none | no |
geotargeting | Specify if you want to target your listeners by location. Can be "true" or "false". | true | no |
audioAdaptive | Allow the player widget to play Adaptive Audio mounts. Can be "true" or "false". | false | no |
forceHls | Force player to use HLS stream. Can be "true" or "false". | false | no |
forceHlsts | Force player to use HLSTS stream. Can be "true" or "false". | false | no |
buybtnvisible | Should the buy button be displayed. Can be "true" or "false" | true | no |
coverartvisible | Should the buy cover art be displayed. Can be "true" or "false" | true | no |
alllowexplicitcoverart* | Allow the player widget to display explicit cover art | false | no |
streamwhilemuted | Allow the widget to be muted | false | no |
defaultvolume | Set the default player volume. The range is from 0-1; e.g: 0.5 which will be 50% | 0.3 | no |
*Not applicable with Mini Widgets
Callbacks
Listing of events dispatched by the Media Player Widget to which you can assign a callback.
Event name | Description | Data |
---|---|---|
onappready | Widget application ready | widget object instance |
ontrack | new track is playing | track object |
onadbreak | commercial break | none |
onstreamstart | stream starts playing | none |
onstreamstopped | stream stopped playing | none |
onstreamgeoblocked | stream is geographically blocked | none |
onstreamfailed | stream failed to play | none |
Callback example
<td-player
id="td-player"
type="classic"
highlightcolor="#999999"
primarycolor="#aaaaaa"
secondarycolor="#333333"
station="TRITONRADIOMUSIC"
onappready="appReady"
>
</td-player>
<script>
var widgetPlayer;
//onappready callback function
function appReady( widgetObjectInstance ){
widgetPlayer = widgetObjectInstance;
}
</script>
Triggers
Listing of all triggers you can use.
All triggers are accessible only when widget is properly initialized. Use onappready
widget attribute to assign a callback function in order to get the widget object. All triggers can be accessed via this widget object ex: object.trigger( '<name>', options);
Name | Description | Options |
---|---|---|
play | Trigger used to switch to a specific station/mount | { station: <your station> } or { mount: <your mount> } |
stop | Trigger used to stop the current playback | none |
Trigger Example
<td-player
id="td-player"
type="classic"
highlightcolor="#999999"
primarycolor="#aaaaaa"
secondarycolor="#333333"
station="TRITONRADIOMUSIC"
onappready="appReady"
>
</td-player>
<a href="#" onclick="switchStation( 'TRITONRADIOMUSIC' )"> Switch station to TRITONRADIOMUSIC </a>
<script>
var widgetPlayer;
//callback function
function appReady( object ){
widgetPlayer = object;
}
function switchStation( yourNewStation ){
if( widgetPlayer ){
widgetPlayer.trigger('play', { station: <yourNewStation> } );
}
}
</script>
Examples
Media Player Bar Widget Example
This widget works well if you want to place a player at the top or bottom of the page. To do so, you will need to place the widget in the template of your site. This 'type' can also be used in your pages by placing it within the element <div>
where you want it to appear on your page.
Below is a simple example using our demo station with the callsign 'TRITONRADIOMUSIC'
<div class="player-container" style="background:#f5f5f5;">
<td-player
id="td-player"
type="bar"
autostart="false"
defaultcoverart="//player.listenlive.co/templates/StandardPlayerV4/webroot/img/default-cover-art.png"
station="TRITONRADIOMUSIC"
>
</td-player>
</div>
Click here for a live example.
Media Player Classic Widget Example
This widget works well if you want to place a horizontal player within a page. To do so, you will need to place it within the element <div>
where you want it to appear on your page.
Below is a simple example using our demo station with the callsign 'TRITONRADIOMUSIC'
<div class="player-container" style="background:#f5f5f5;width:450px;height:200px;">
<td-player
id="td-player"
type="classic"
autostart="false"
defaultcoverart="//player.listenlive.co/templates/StandardPlayerV4/webroot/img/default-cover-art.png"
station="TRITONRADIOMUSIC"
>
</td-player>
</div>
Click here for a live example.
Media Player Vertical Widget Example
This widget works well if you want to place a vertical player within a page. To do so, you will need to place it within the element <div>
where you want it to appear on your page.
Here is a simple example below using our demo station with the callsign 'TRITONRADIOMUSIC'
<div class="player-container" style="background:#f5f5f5;width:450px;height:200px;">
<td-player
id="td-player"
type="vertical"
autostart="false"
defaultcoverart="//player.listenlive.co/templates/StandardPlayerV4/webroot/img/default-cover-art.png"
station="TRITONRADIOMUSIC"
>
</td-player>
</div>
Click here for a live example.
Media Player Mini Widget Example
This widget works well if you want to place a mini player within a page. To do so, you will need to place it within the element <div>
where you want it to appear on your page.
Below is a simple example using our demo station with the callsign 'TRITONRADIOMUSIC'
<div class="player-container" style="background:#f5f5f5;width:450px;height:200px;">
<td-player
id="td-player"
type="mini"
autostart="false"
defaultcoverart="//player.listenlive.co/templates/StandardPlayerV4/webroot/img/default-cover-art.png"
station="TRITONRADIOMUSIC"
>
</td-player>
</div>
Click here for a live example.
Advanced Examples
Media Player Classic With Ad Companions
In this example, you specify where you want to display your in-stream ad companions by specifying the elements <div>
where you want them to appear. You have the option to display both a Medium Rectangle -- aka Big Box (300 x 250) -- or Leaderboard (728 x 90) banner to accompany your audio ads.
Click here for a live example.
<!doctype html>
<html>
<head>
<title>Player bar with companions</title>
</head>
<body >
<div class="player-container" style="background:#f5f5f5;">
<td-player
id="td-player"
type="classic"
autostart="false"
defaultcoverart="//player.listenlive.co/templates/StandardPlayerV4/webroot/img/default-cover-art.png"
station="TRITONRADIOMUSIC"
leaderboard="companionLeaderBoard"
mediumrectangle="companionBigBox"
>
</td-player>
</div>
<div id="companionLeaderBoard" style="width:728px;height:90px">Leaderboard</div>
<div id="companionBigBox" style="width:300px;height:250px;">Companion Big Box</div>
<script src="//widgets.listenlive.co/1.0/tdwidgets.min.js"></script>
</body>
</html>
Media Player Vertical With Preroll
For this example you need to set up the Ad Player Widget that you can find here. Click here for a live example.
<!doctype html>
<html>
<head>
<title>Player Vertical With Preroll</title>
</head>
<body >
<div style="background:#f5f5f5;width:450px;height:200px;" >
<td-player
id="td-player"
type="vertical"
defaultcoverart="//player.listenlive.co/templates/StandardPlayerV4/webroot/img/default-cover-art.png"
highlightcolor="#013068"
primarycolor="#ffffff"
station="TRITONRADIOMUSIC"
autostart="false"
trackingparameters="{'key':'value','key2': 'value2'}"
>
</td-player>
<td-adplayer id="td-adplayer"
client="vast"
tag="http://proserv.tritondigital.com/vast/vast2_linear_webteam.xml"
>
</td-adplayer>
</div>
<script src="//widgets.listenlive.co/1.0/tdwidgets.min.js"></script>
</body>
</html>