Detect when song changes #7207

carrzkiss · 2025-04-29T18:02:06Z

carrzkiss
Apr 29, 2025

Hello everyone.

I am using the following code for my streaming hls/liquidsoap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<script src='https://stream.website.com:9443/Assets/hls.js'></script>

</head>
<body>
<audio id='player' controls >
<script>
//Allow the Radio Listener to click the page to start listening.
//A warning will let them know about this, and will only be available IF they have started the stream.
function playAudio() {
  var audio = document.getElementById("player");
  audio.play().catch(function(error) {
    // Autoplay was prevented. Show a UI element to allow the user to manually start playback.
    console.error('Autoplay was prevented:', error);
    //alert('Click the page to play audio.');
    
    // Add a listener for the first user interaction to play the audio
    document.addEventListener('click', function playAfterInteraction() {
        audio.play();
        document.removeEventListener('click', playAfterInteraction);
    });
  });
}
//End Page Listening Click.
	const video = document.getElementById('player');

	if (Hls.isSupported()) {
		console.log('HLS.js is supported');

		const hls = new Hls({
			autoStartLoad: true,
			debug: true,
			enableWorker: true,
			enableStreaming: true,
		});

		hls.loadSource('https://stream.website.com:9443/hls/102/MyRadio102.m3u8');

		hls.attachMedia(video);
// Added below to detect song change, but nothing is being reported to the Google Dev Tool | Console.
		let previousManifest = null;
	hls.on(Hls.Events.MANIFEST_PARSED, function(event, data) {
      // Compare the new manifest data with the previous one
      if (previousManifest && previousManifest.mediaGroups.AUDIO.main.default.name !== data.levels[data.firstLevel].name) {
        // Song has changed
        console.log('Song changed!');
      }
    
      // Update the previous manifest data
      previousManifest = data;
    });

		hls.on(Hls.Events.ERROR, function (event, data) {
			if (data.fatal) {
				switch(data.type) {
					case Hls.ErrorTypes.NETWORK_ERROR:
						// try to recover network error
						console.log("fatal network error encountered, try to recover");
						hls.startLoad();
						break;
					case Hls.ErrorTypes.MEDIA_ERROR:
						console.log("fatal media error encountered, try to recover");
						hls.recoverMediaError();
						break;
					default:
						// cannot recover
						// hls.destroy();
                        console.error('CAN NOT RECOVER', data.type);
						break;
				}
			}
		});
	} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
		// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
		// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
		// This is using the built-in support of the plain video element, without using hls.js.
		console.log('HLS js is not supported');

		video.src = 'https://stream.website.com:9443/hls/102/MyRadio102.m3u8';
	}

	function playVid() {
		video.play();
	}

	function pauseVid() {
		video.pause();
	}
</script>
</body>
</html>

I added this to detect when the song changes (line 43 above), but it does not work.

		let previousManifest = null;
	hls.on(Hls.Events.MANIFEST_PARSED, function(event, data) {
      // Compare the new manifest data with the previous one
      if (previousManifest && previousManifest.mediaGroups.AUDIO.main.default.name !== data.levels[data.firstLevel].name) {
        // Song has changed
        console.log('Song changed!');
      }
    
      // Update the previous manifest data
      previousManifest = data;
    });

Checking the Google Dev Tools | Console.
There is only the hls data, nothing shows the Song changed!.
Any ideas on detecting the song change?
I want to grab information from the database to update the page on each song change.

robwalch · 2025-04-30T07:42:17Z

robwalch
Apr 30, 2025
Maintainer

That depends on what the contents of your asset look like (https://stream.website.com:9443/hls/102/MyRadio102.m3u8). Can you share?

I wouldn't expect the level (stream-inf) or media group names to correlate to different songs. Usually live radio playlist have ID3 timed metadata with song information.

2 replies

carrzkiss Apr 30, 2025
Author

The ID3 data would be great.
I found this. (Google search first result was their AI)

hls.on(Hls.Events.FRAG_PARSING_METADATA, (event, data) => {
  if (data && data.samples) {
    data.samples.forEach(sample => {
      // Process the metadata sample
      console.log("Metadata type:", sample.type); // e.g., 'ID3'
      console.log("Metadata data:", sample.data); // Raw metadata
      console.log("Metadata PTS:", sample.pts);  // Presentation timestamp
    });
  }
});

This does not give anything useful. I was hopeful that the sample.pts would stay the same throughout the song, but they change with each chunk that is sent.

If you could let me know how to obtain the actual metadata that would be fantastic.
I have searched, but cannot find anything concrete. It all points to the example code I provided above.

carrzkiss Apr 30, 2025
Author

OK, this is getting close.

const id3 = document.getElementById('id3');
hls.on(Hls.Events.FRAG_PARSING_METADATA, function (event, data) {

   	data.samples.forEach((sample) => {

   		var uint8array = new TextEncoder().encode("utf-8");
   	var string = new TextDecoder().decode(sample.data);
   	console.log(string)
               id3.textContent = string;
         });
});

Output

ID3�\TYER���1980TIT2���Def Leppard - WastedTDAT���0101TALB���On Through The Night

carrzkiss · 2025-05-01T00:03:02Z

carrzkiss
May 1, 2025
Author

OK, so this is what I have come up with.

 hls.on(Hls.Events.FRAG_PARSING_METADATA, function (event, data) {
    	data.samples.forEach((sample) => {
		var string = new TextDecoder().decode(sample.data);
		const encoder = new TextEncoder();
		const utf8Bytes = encoder.encode(string);
		id3Change.textContent = utf8Bytes;
		console.log(utf8Bytes)
         });
});

This will return a long string of numbers for each song played.
The string looks like this. (Broken down so not to have a long side-by-side scrollbar.

73,68,51,3,0,0,0,0,2,4,84,89,69,82,0,0,0,5,239,191,189,0,3,49,57,56,52,84,82,67,75,0,0,0,3,239,191,189,0,3,48,56,
84,73,84,50,0,0,0,34,239,191,189,0,3,87,46,65,46,83,46,80,46,32,45,32,83,108,101,101,112,105,110,103,32,40,1
05,110,32,116,104,101,32,70,105,114,101,41,84,68,65,84,0,0,0,5,239,191,189,0,3,49,57,56,52,67,79,77,77,0,0,0,
239,191,189,239,191,189,0,3,66,108,97,99,107,105,101,32,76,97,119,108,101,115,115,32,91,67,97,112,105,116,
111,108,32,82,101,99,111,114,100,115,93,32,40,66,108,97,99,107,105,101,32,76,97,119,108,101,115,115,47,77,
105,107,101,32,86,97,114,110,101,121,41,123,85,110,107,110,111,119,110,32,83,116,117,100,105,111,125,123
,123,78,111,110,101,125,125,60,66,108,97,99,107,105,101,32,76,97,119,108,101,115,115,47,67,104,114,105,11
5,32,72,111,108,109,101,115,47,82,97,110,100,121,32,80,105,112,101,114,47,84,111,110,121,32,82,105,99,104,
97,114,100,115,62,84,65,76,66,0,0,0,9,239,191,189,0,3,87,46,65,46,83,46,80,46

Now, what I am doing with this data is submitting it into my database.
I then send it back to the page and monitor it to see if it has changed.
If it has changed, that means a new song is playing, so we send that data to the database.
And retrieve it back to the page for another round of checks for the same or different.

Works great.
The next step is to provide the song data information from the database to the track, which is the simple part. Using ASP Classic and SQL Server, this will be a breeze.

Thanks for the development of this wonderful component.
More resources need to be available for it, as there are not many resources available for reading the Metadata from the files.

Thanks.

6 replies

carrzkiss May 1, 2025
Author

How would that be implemented into what I already have, or should I go another route?

 hls.on(Hls.Events.FRAG_PARSING_METADATA, function (event, data) {

  if (data) {
    console.log("Fragment metadata:", data);
  }
    	data.samples.forEach((sample) => {

    		//var uint8array = new TextEncoder().encode("utf-8");
		var string = new TextDecoder().decode(sample.data);
		const encoder = new TextEncoder();
		const utf8Bytes = encoder.encode(string);
		id3Change.textContent = utf8Bytes;
		
		console.log(utf8Bytes)
		console.log(string)
         });
});

robwalch May 1, 2025
Maintainer

You don't need to use the HLS.js API. Search for ID3 metadata in HTMLMediaElement TextTracks. You can use the same interface to get data when playing HLS with HTMLMediaElement src= in Safari.

carrzkiss May 1, 2025
Author

That's the problem.
I've already searched Google for hours and looked at every page I could find, but I could not find anything concrete on doing this.
I read that the TextTrackList was needed for an HLS stream since it is more than a single song.
But still, no good code shown on either of them.
Most sites talk about the properties, but don't give real-world examples. (Which most people, like myself, need.)

If you have some links, that would be very helpful and much appreciated.

I'd be happy to get the filename, which I tried, but got an error on the const urlParts = manifestUrl.split('/');
So, I've tried everything I have found through websites and during the Google Search AI Results.
Just nothing ever works.

robwalch May 5, 2025
Maintainer

You can see if the HLS content has ID3 metadata using the hls.js demo page. A row will be displayed in the Timeline panel.

You can log video.textTracks to inspect tracks and cues as long as the track mode is "hidden" and not "disabled". Here's an example that will log each cue change:

for (let i = video.textTracks.length; i--;) {
  const track = video.textTracks[i];
  if (track.kind === "metadata") {
    console.log("found metadata track", track);
    track.addEventListener('cuechange', function (cueChangeEvent) {
      console.log("cuechange", cueChangeEvent);
    });
  }
}

carrzkiss May 10, 2025
Author

I found this on the hidden or disabled textTracksTextTrack: mode property
Adding it to your project code,

<html>
  <head>
    <title>Hls.js demo - basic usage</title>
  </head>

  <body>
    <script src="hls.js"></script>

    <center>
      <h1>Hls.js demo - basic usage</h1>
      <audio  id="video" controls></audio>
    </center>

    <script>
      var video = document.getElementById('video');
      if (Hls.isSupported()) {
        var hls = new Hls({
          debug: true,
        });

	  const id3 = document.getElementById('id3');
hls.on(Hls.Events.FRAG_PARSING_METADATA, function (event, data) {

   	data.samples.forEach((sample) => {

   		var uint8array = new TextEncoder().encode("utf-8");
   	var string = new TextDecoder().decode(sample.data);
   	console.log(string)
               //id3.textContent = string;
         });
});

window.addEventListener("load", (event) => {
  let trackElem = document.querySelector("track");
  let track = trackElem.track;

  track.mode = "hidden";

  for (const cue of track.cues) {
    cue.pauseOnExit = true;
  }
});

for (let i = video.textTracks.length; i--;) {
  const track = video.textTracks[i];
  if (track.kind === "metadata") {
    console.log("found metadata track", track);
    track.addEventListener('cuechange', function (cueChangeEvent) {
      console.log("cuechange", cueChangeEvent);
    });
  }
}

        hls.loadSource('https://stream.website.com:9443/hls/102/MyRadio102.m3u8');
        hls.attachMedia(video);
        hls.on(Hls.Events.MEDIA_ATTACHED, function () {
          video.muted = true;
          video.play();
        });
      }
	  
	  
      // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
      // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.
      // This is using the built-in support of the plain video element, without using hls.js.
      else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = 'https://stream.website.com:9443/hls/102/MyRadio102.m3u8';
        video.addEventListener('canplay', function () {
          video.play();
        });
      }
	  
    </script>
  </body>
</html>

I get some Metadata from this console.log(string) but it is all messed up.

ID3���TYER���1983TRCK���05TIT2���Heft!TDAT���1983COMM���Dave King/"Fast" Eddie Clarke/Jerry Shirley [Columbia Records] (Eddie Kramer){Marcus Music and Maison Rouge Studios}{{None}}<Dave King/"Fast" Eddie Clarke/Jerry Shirley/Mick Feat>TPE1���FastwayTALB���Fastway

But I do not get anything from the code you provided, and the code I found for disabled or hidden does not do anything either.
But it is using window.addEventListener("load", (event) => {
I don't know if this is working.

If possible, could you test it on your end with an HLS stream and see if it works to display anything that I can grab from and challenge the database with?
I truly want to grab the filename, but I don't know if that will be possible unless I have to pass that from the LiquidSoap/HLS server to the streamed page.

carrzkiss · 2025-05-11T02:50:54Z

carrzkiss
May 11, 2025
Author

I found a way to do it.
I am embedding into the MP3 files a series of numbers like so.
<<561651351351351>>
I am then running a RegEx against the output of this.

ID3���TYER���2025TRCK���02TIT2���DJ Drop OutroTDAT���2304COMM���ÿ︀ÿ︼
<05022025000410017>>TPE1���CFF Radio StudiosTALB	��DJ Drops

This will grab the <05022025000410017>
I then challenge this against the database, which returns the information that goes with that ID.

This <<561651351351351>> is placed in the COMM section of the MP3 file.
Making it the only value there.
Why there are multiple << and >>
This is because either HLS or something is cutting off the first < from the string, so if there is only one
<05022025000410017>
It would end up like this.
�ÿ︀ÿ︼05022025000410017>
Making it impossible to grab the numbers.

So, now when the song is playing, it displays the information on the song.
And when the song changes, it changes along with it.
Even though it does change a few seconds before the song starts playing.

I had always wondered why, when listening to LIVE radio, you would always see the information on the next song even before it started playing.
Reason:
It is queued up and buffering, and will show as playing, while the current song finishes.

Maybe I will find a way around this, but I am one happy person right now.
I wish my son, whom I was making this Radio Station for both him and me, were here to share this with me.
Damn, I miss my son.

Take care, Rob.
I genuinely wish you could have helped me more, but I understand not all problems are solvable.
But there is always a workaround if you are determined enough to keep at it.

0 replies

Uh oh!

Detect when song changes #7207

Uh oh!

Uh oh!

carrzkiss Apr 29, 2025

Replies: 3 comments · 8 replies

Uh oh!

robwalch Apr 30, 2025 Maintainer

Uh oh!

carrzkiss Apr 30, 2025 Author

Uh oh!

carrzkiss Apr 30, 2025 Author

Uh oh!

carrzkiss May 1, 2025 Author

Uh oh!

carrzkiss May 1, 2025 Author

Uh oh!

robwalch May 1, 2025 Maintainer

Uh oh!

carrzkiss May 1, 2025 Author

Uh oh!

robwalch May 5, 2025 Maintainer

Uh oh!

carrzkiss May 10, 2025 Author

Uh oh!

carrzkiss May 11, 2025 Author

carrzkiss
Apr 29, 2025

Replies: 3 comments 8 replies

robwalch
Apr 30, 2025
Maintainer

carrzkiss Apr 30, 2025
Author

carrzkiss Apr 30, 2025
Author

carrzkiss
May 1, 2025
Author

carrzkiss May 1, 2025
Author

robwalch May 1, 2025
Maintainer

carrzkiss May 1, 2025
Author

robwalch May 5, 2025
Maintainer

carrzkiss May 10, 2025
Author

carrzkiss
May 11, 2025
Author