Radiant Media Player

HLS with ID3 frames



Introduction

Radiant Media Player supports the retrieval & parsing of ID3 frames when streaming HLS with hls.js. While there are other use-cases, the main usage for ID3 frames is to obtain metadata information for audio-only streaming like a song's title or an album's cover. This is commonly used by web radio, for example to update in real-time information about the currently airing audio content.

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

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

Thanks to its advanced ID3 retrieval implementation hls.js provides ID3 frames information 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.

Raw ID3 samples information through player API

Additionally to the above method, each time new ID3 metadata are parsed by the player the hlsid3tagparsingcompleted event fires (this can be for example each time a new .ts segment is loaded). 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 needs to be parsed to retrieve the ID3 frame data but this is not covered by our scope of support.

Support notes

Where hls.js cannot be used (e.g. iOS Safari, older Android or when using HLS streaming through Shaka Player) the retrieval of ID3 metadata is not supported.

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