Radiant Media Player

Audio playlist



Documentation sections


Features

With the release of Radiant Media Player 5.3.0, we now offer audio playlist support (audio-only content). This works very similarly to our video playlist implementation so we advise first to review this area of our documentation before moving forward with audio playlist.

Note that you cannot mix both video and audio-only content for playlist. It is has to be one or the other.

Video ads can be played each time a new audio item is loaded within the player. The audio playlist UI is fully compatible with mobile devices. A built-in error-recovery mechanism is also provided to skip audio playlist items that may be unavailable.

Supported audio-only streaming protocols are HLS, DASH and MP3/OGG/M4A progressive download. Other video playlist features and restrictions generally apply to audio playlist.


Playlist data set with a JSON file

The audio playlist can be initialised by passing to the playlistLoc setting a URI to a JSON file holding audio playlist data. You will also need to set playlistAudioOnly player setting to true. Here is a full example of a well-formatted JSON file that can be used for input to an audio playlist.

The general playlist JSON file structure is as below. The required fields for each item are:

  • src - streaming source for the audio playlist item
  • poster - poster frame for the audio playlist item - size should be 832x468
  • contentTitle - title for the audio playlist item
  • contentDescription - description for the audio playlist item

All items within the audio playlist must have the same src type (e.g. if you use HLS - each playlist item must have a HLS URI in its src information; if you use MP3 progressive download - each playlist item must have a MP3 URI in its src information)

Optional fields for each playlist item are:

  • thumbnail (highly recommended) - URI to thumbnail frame for the audio playlist item (size should be 80x45) - if thumbnail information is not found poster data will be used
  • adTagUrl - URI to the video or audio adTag to be loaded when the audio playlist item starts - if you use ads you must also set the player setting ads to true
  • adTagWaterfall - an array of URI to be used for client-side waterfalling - see here for more information
{
  "playlist": [
    {
      "src": {
        "hls": "your-audio-only-hls-url-1.m3u8"
      },
      "poster": "https://www.radiantmediaplayer.com/media/playlist/poster/item-1.jpg",
      "thumbnail": "https://www.radiantmediaplayer.com/media/playlist/poster/item-1-thumbnail.jpg",
      "contentTitle": "Playlist Item 1",
      "contentDescription": "Description for playlist item 1"
    },
    {
      "src": {
        "hls": "your-audio-only-hls-url-2.m3u8"
      },
      "poster": "https://www.radiantmediaplayer.com/media/playlist/poster/item-2.jpg",
      "thumbnail": "https://www.radiantmediaplayer.com/media/playlist/poster/item-2-thumbnail.jpg",
      "contentTitle": "Playlist Item 2",
      "contentDescription": "Description for playlist item 2"
    },
    {
      "src": {
        "hls": "your-audio-only-hls-url-3.m3u8"
      },
      "poster": "https://www.radiantmediaplayer.com/media/playlist/poster/item-3.jpg",
      "thumbnail": "https://www.radiantmediaplayer.com/media/playlist/poster/item-3-thumbnail.jpg",
      "contentTitle": "Playlist Item 3",
      "contentDescription": "Description for playlist item 3"
    }
  ]
}

Similarly to video playlist you can also pass audio playlist data as a JavaScript array of objects. See video playlist docs for more information.


Audio playlist settings

playlistAudioOnly: Boolean

This enables audio playlist layout required to properly display a playlist of audio-only content. Default: false.

Other settings for video playlist also apply for audio playlist


Audio playlist code example - see this example live here

The below code is used to display the audio playlist example provided above:

Take note of the additional div elements required to display the audio playlist UI.

<script src="https://cdn.radiantmediatechs.com/rmp/5.4.8/js/rmp.min.js"></script>
<!-- Here is our specific markup for playlist -->
<div class="rmp-playlist-container">
  <div class="rmp-playlist-player-wrapper">
    <div id="rmpPlayer"></div>
  </div>
</div>
<script>
var settings = {
  licenseKey: 'your-license-key',
  // if you want ads to show uncomment this next setting
  // ads: true,
  // our playlist settings
  playlistUpNextAutoplay: true,
  playlistEndedLoop: false,
  playlistLoc: 'https://www.radiantmediaplayer.com/media/playlist/audio-only/audio-playlist-hls.json',
  // our audio playlist setting
  playlistAudioOnly: true
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
rmp.init(settings);
</script>

Audio playlist API

The video playlist API also applies to audio playlist.


Additional support notes

The support notes for video playlist also apply to audio playlist.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.