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:

  • ID3 frames through the TextTrack API
  • Raw ID3 samples information through player API (hls.js only)

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 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 is especially convenient because ID3 metadata are directly usable with minimum overhead for your implementation and compatible with Desktop, iOS and Android.


Raw ID3 samples information through player API (hls.js only)

Alternatively to the above method and when streaming content with hls.js, each time new ID3 metadata are parsed by the player the hlsid3tagparsingcompleted API event fires. Note that this event fires when ID3 metadata finishes being parsed by the player not when they need to be presented to the viewer (this needs to be determined in your application logic). When this event fires, the getHlsId3TagSamples player API method can be invoked to gain access to the raw ID3 metadata.

The getHlsId3TagSamples API method returns an object as such:

{
  data: Uint8Array
  dts: Number
  pts: Number
}

The ID3 payload is held within the data property of the object returned by getHlsId3TagSamples. This payload needs to be parsed to retrieve the ID3 frame data but this is not covered by our scope of support.


Support notes

  • Android 5+ is required for parsing ID3 tags
  • on macOS Safari use forceHlsJSOnMacOSSafari: true setting to enable parsing of ID3 tags with hls.js
  • Since player version 4.6.23 we DO 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.