search

video-dev / hls.js

HLS.js is a JavaScript library that plays HLS in browsers with support for MSE.
https://hlsjs.video-dev.org/demo
Other
14.89k stars 2.58k forks source link

Live music metadata for audio streams? #5706

Closed spinitron closed 5 months ago

spinitron commented 1 year ago

What do you want to do with Hls.js?

Internet radio (aka webcasting) was introduced in the 90s, SHOUTcast became the de facto standard protocol and is still widely used. There are good reasons to transition to something more modern e.g. HLS but I'm stuck on the requirement that live audio webcasts display at least artist and title. The US statutory webcast license requires it but it is in any case an important feature for webcasters and listeners. SHOUTcast has a clunky protocol for multiplexing metadata text and the audio stream into the HTTP octet stream that is widely supported in encoders, servers and clients.

I'm interested in web players: Listener starts stream playback from web page interaction, play continues if the listener sends the tab or browser to the background or locks the screen. Hence I need the "notification" player.

For the protocol I guess subtitles or CC might be suitable. (There is also HLS Timed Metadata but it seems maybe defunct.)

For display I found the Media Session API (are there other APIs to consider?) but I can't update that from my web player: I need Hls.js and/or the OS to do that.

There are a lot of ways to get subtitles/CC/metadata into an HLS audio-only stream. Do any of them result in updating the device's "notification" player?

If no, is that something Hls.js could do at least on some devices?

What have you tried so far?

Research.

robwalch commented 1 year ago

Hi @spinitron,

HLS.js has robust support for metadata in HLS audio streams. It is up to the application using HLS.js to use that data (found in TextTrack metadata cues and API event data). For example, if you would like to use the Media Session API to update song title, then setup your application to listen for ID3 data from HLS.js and when the media element plays over the start of a new song, update the session.

pieterdd commented 5 months ago

Assuming one has set enableID3MetadataCues: true, how would you access the TextTrack metadata cues you mentioned? I've looked at navigator.mediaSession.metadata but it's set to null. When setting up a hls.on(Hls.Events.FRAG_PARSING_METADATA hook I don't find any track/artist information in the parameter data either.

The stream I tested is https://hls.somafm.com/hls/groovesalad/320k/program.m3u8, which from what I heard is "fMP4 - Fragmented ISOBMFF-MP4 – MPEG-DASH Compatible".

robwalch commented 5 months ago

Textracks are found on the HTMLMediaElement attached to HLS.js. Iterate through the HTMLMediaElement.textTracks to find tracks of kind === 'metadata'. HLS.js creates metadata tracks and appends cues in id3-track-controller:

https://github.com/video-dev/hls.js/blob/v1.5.9/src/controller/id3-track-controller.ts