Media Player Widget

The Triton Digital Media Player Widget (beta) allows publishers to easily play their station's stream directly on their site.

Features

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="http://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
itunesaffiliateid* Your iTunes Affiliate ID no 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
renderingmode** Choose the desired rendering mode; either "flash" and/or "html5". You can choose a single mode or specify a fallback by entering both; e.g. "Flash,Html5" or "Html5,Flash" (if the first format isn't detected it will use the other as fallback). Flash,Html5 no
geotargeting Specify if you want to target your listeners by location. Can be "true" or "false". true no

*Not applicable with Mini Widgets

**FLASH-based player will not be able to play HTTPS streams. When the SDK is loaded with Flash support in HTTPS context, our SDK will automatically fall back to HTML5.

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="STWSEB"
    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="STWSEB"
    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.

playerbar

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="true"
        defaultcoverart="http://playercdn.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.

classic

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="true"
            defaultcoverart="http://playercdn.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.

vertical

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="true"
            defaultcoverart="http://playercdn.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.

mini

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="true"
            defaultcoverart="http://playercdn.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="true"
                defaultcoverart="http://playercdn.listenlive.co/templates/StandardPlayerV4/webroot/img/default-cover-art.png"
                station="TRITONRADIOMUSIC"
                leaderboard="companionLeaderBoard"
                   mediumrectangle="companionBigBox"
                renderingmode="Html5,Flash"
                >
        </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="http://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="http://playercdn.listenlive.co/templates/StandardPlayerV4/webroot/img/default-cover-art.png"
                highlightcolor="#013068"
                primarycolor="#ffffff"
                station="TRITONRADIOMUSIC"
                autostart="false"
                trackingparameters="{'key':'value','key2': 'value2'}"
                renderingmode="Flash"
                >
        </td-player>

        <td-adplayer id="td-adplayer"
             client="vast"
             tag="http://proserv.tritondigital.com/vast/vast2_linear_webteam.xml"
        >
        </td-adplayer>
</div>

<script src="http://widgets.listenlive.co/1.0/tdwidgets.min.js"></script>


</body>
</html>