I am using hls.js for radio playback. It’s working pretty well for me. Now, I wish to retrieve currently playing song data (title, artist). I also tried using some callbacks such as (MANIFEST_PARSED, MANIFEST_LOADED) but had no success finding this information.
This short tutorial may help you!
To get the stream title from metadata in an HLS (HTTP Live Streaming) stream, you can use the WebVTT parser in JavaScript.
Here’s an example of how you can do this:
const vttUrl = ‘https://example.com/path/to/metadata.vtt’;
fetch(vttUrl)
.then(response => response.text())
.then(text => {
const parser = new WebVTT.Parser(window, WebVTT.StringDecoder());
parser.oncue = function(cue) {
console.log(cue.text); // this is the stream title
};
parser.parse(text);
parser.flush();
});This will fetch the metadata file, parse it using the WebVTT parser, and log the stream title to the console when the oncue event is triggered.
Keep in mind that the metadata in an HLS stream is typically stored in a separate file with a .vtt extension, and that file must be fetched and parsed separately from the actual stream.
Thanks for this, actually this is not what I want now. My question is:
Is there a way to retrieve currently playing song data such as its title, artist, etc?
Yes, it is possible, but it depends on how the stream is set up and whether the necessary metadata is included in the stream.
One way to do this is to use the WebVTT parser in JavaScript, as mentioned in the previous answer, to parse metadata that is embedded in the audio stream and extract the song title and artist information.
Another way is to use the ID3 (MPEG audio stream metadata) standard, which allows metadata to be embedded in MP3 audio files. You can use a JavaScript library such as id3-parser to parse the ID3 tags and extract the song title and artist information.
Keep in mind that not all audio streams include metadata, and even if they do, the metadata may not always include the song title and artist information. In these cases, it may not be possible to retrieve this information.
For more please refer to this blog: Everything about metadata