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


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.11.5/js/rmp.min.js"></script>
<div id="rmpPlayer"></div>
  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,
    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
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.