Song History Widget

The Triton Song History Widget allows publishers to easily list current and past songs from their station.

Features

Prerequisite

Before adding the player element to your pages, you’ll need to add the following code snippet (JavaScript) to the bottom of your page or site template.

<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

The Song History Widget has its own element <td-songhistory></td-songhistory>and can be included anywhere on your page.

Use the attributes below to configure and customize your widget to suit your needs.

Configuration

When embedding the TD Song History 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 Song History has its own element <td-songhistory></td-songhistory> and can be included anywhere on your page or site template.

Use the attributes below to configure and customize your widget to suit your needs.

Attributes

Parameter Type Description Required
id String Element ID for internal reference. yes
station String Radio station yes
playerlink String Link to a player widget (see Player widget integration) no
thirdpartylookup String Allows third party lookups e.g. iTunes. Default to true no
itunesaffiliateid String Your iTunes Affiliate ID no
itunescountry String The two-letter country code for the store you want to search. no
songsdisplayed Number Number of tracks you want in the song history no
title String Widget Top left title no
buybtntext String Text on the buy button no
primarycolor String hex value, e.g.: #FFFFFF no
highlightcolor String hex value, e.g.: #FFFFFF no
headerbgcolor String hex value, e.g.: #FFFFFF no
secondarycolor String hex value, e.g.: #FFFFFF no
buybtnvisible Bool Should the buy button be displayed no
coverartvisible Bool Should the buy cover art be displayed no
timeplayedvisible Bool Should the time that the track played be displayed no
alllowexplicitcoverart Bool Allow the player widget to display explicit cover art. Default false no

Callbacks

Listing of events dispatched by the 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

Player widget integration

When there's a player widget on the same page as a song history widget, you may want them to link the stations between each other. Add a playerlink attribute to the song history widget. The playerlink allows any station changes in the player to notify the song history widget. The playerlink is an ID to the player widget you want to link.

Click here for a live example.

Callback example

<td-songhistory
          id="td-songhistory"
          station="TRITONRADIOMUSIC"
          songsdisplayed="10"
          itunesaffiliateid="1234"
          title= "Recently played"
          buybtntext= "Buy"
          highlightcolor="#999999"
          primarycolor="#aaaaaa"
          headerbgcolor= "#ccc"
          secondarycolor="#f5f5f5"
          onappready="appReady"
          >
  </td-songhistory>

<script>

    var widgetSongHistory;

    //onappready callback function
    function appReady( widgetObjectInstance ){
        widgetSongHistory = widgetObjectInstance;
    }

</script>

Examples

Basic Integration

Click here for a live example.

<!doctype html>
<html>
<head>
    <title>Song History</title>
</head>
<body >

  <td-songhistory
              id="td-songhistory"
              station="TRITONRADIOMUSIC"
              songsdisplayed="10"
              thirdpartylookup="True"
              itunesaffiliateid="1234"
              title= "Recently played"
              buybtntext= "Buy"
              highlightcolor="#999999"
              primarycolor="#aaaaaa"
              headerbgcolor= "#ccc"
              secondarycolor="#f5f5f5"
              >
  </td-songhistory>


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


</body>
</html>