Radiant Media Player

HLS with ID3 frames



Documentation sections


Scope of support

Radiant Media Player supports the retrieval & parsing of ID3 frames when streaming HLS (either through hls.js or native HLS in Safari). Usage examples vary from server-side ad insertion, metadata of audio-only streams (song title, album cover ...), slides attached to a video presentation and so on.

Radiant Media Player provides 2 ways to retrieve ID3 metadata from a HLS stream:

For more information on ID3 tags you can visit the id3.org site. A list of ID3 frames (id3v2.4) can be found here.


ID3 frames through player API (recommended)

Since Radiant Media Player version 5.1.14 we provide native and easy-to-use extraction of ID3 frames through our player API:

ID3 API event

meta: this event fires each time ID3 metadata are updated.

ID3 API method

getMetadata()

When invoked, this method will return Object|null representing the current ID3 metadata. The returned Object when available will have the following structure:

{
  data: {
    albumTitle: String, // TALB frame
    recordingTime: String, // TDRC frame
    releaseTime: String, // TDRL frame
    composer: String, // TCOM frame
    contentType: String, // TCON frame
    fileType: String, // TFLT frame
    contentGroup: String, // TIT1 frame
    title: String, // TIT2 frame
    duration: String, // TLEN frame
    artist: String, // TPE1 frame
    band: String, // TPE2 frame
    conductor: String, // TPE3 frame
    radioStationName: String, // TRSN frame
    radioStationOwner: String, // TRSO frame
    isrc: String, // TSRC frame
    commercialInfo: String, // WCOM frame
    copyrightInfo: String, // WCOP frame
    url: String, // WXXX frame (poster frame)
    start: Number, // start time of the metadata in seconds
    end: Number // end time of the metadata in seconds
  },
  type: "id3"
}

Depending on your HLS stream not all attributes from the data object may be available

Player code example

<script src="https://cdn.radiantmediatechs.com/rmp/5.2.1/js/rmp.min.js"></script>
<div id="rmpPlayer"></div>
<script>
  var src = {
    // Test stream - courtesy of our partner indexcom.com
    hls: 'https://db2.indexcom.com/bucket/ram/00/05/05.m3u8'
  };
  var settings = {
    licenseKey: 'your-license-key',
    src: src,
    width: 640,
    height: 360,
    isLive: true,
    audioOnly: true
  };
  var elementID = 'rmpPlayer';
  var rmp = new RadiantMP(elementID);
  var rmpContainer = document.getElementById('rmpPlayer');
  // We listen to meta API event
  rmpContainer.addEventListener('meta', function () {
    // Each time meta event fires, getMetadata API method is updated and can be queried
    console.log(rmp.getMetadata());
  });
  rmp.init(settings);
</script>

ID3 frames through the TextTrack API

ID3 frames information can generally be retrieved through the HTML5 media TextTrack API. In order to simplify using this approach with Radiant Media Player we provide a full implementation example. So let us head to our demo page to see how it works.

This method may allow for more advanced ID3 frames retrieval implementations like custom ID3 frames or frames that are not available with the getMetadata api method.


Support notes

  • Android 5+ is required for parsing ID3 tags
  • Since player version 4.6.23 we support parsing ID3 tags on iOS 9+ Safari
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.