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.

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

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 - see this example here

<script src="https://cdn.radiantmediatechs.com/rmp/5.5.5/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>

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.