Web Playback SDK: Detect Track End

[_lucifer_]

Plan

Premium

Country

India

Device

Chrome/Firefox Latest

Operating System

Ubuntu 22.04

My Question or Issue

The Web Playback SDK has no state event for detecting the track end. Some workarounds are listed in https://github.com/spotify/web-playback-sdk/issues/35 . But those seem unstable and aren't working properly. What is the right way to detect track end events correctly ?

[Mordicus]

Hello, I'm bumping this thread because as far as I know there is still on way to properly detect the end of a track without using a workaround.
Ideally, there should be an event that we can subscribe to, which would allow more precise control over playback.

[jfk52917]

Still appears to be the case as of mid-2023. Unfortunately, the link posted by _lucifer_ appears to still be the best bet when attempting to identify track end, but it usually fires 2-4 times, making it difficult to work with.

[Mordicus]

For what it's worth @jfk52917 this is how we debounce this call: 
metabrainz/listenbrainz-server/blob/master/frontend/js/src/brainzplayer/SpotifyPlayer.tsx#L119-L122 

To then be used with the aforementioned hack:
metabrainz/listenbrainz-server/blob/master/frontend/js/src/brainzplayer/SpotifyPlayer.tsx#L502-L514 


EDIT for permalinks (apparently we can't paste GH links anymore, so you'll have to copy-paste):

metabrainz/listenbrainz-server/blob/58123bd9b88c6391eb79c7c5b47b864b14daa7d6/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx#L124-L127 
and

metabrainz/listenbrainz-server/blob/58123bd9b88c6391eb79c7c5b47b864b14daa7d6/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx#L540-L552 

[macoirc]

This appears to still be an issue in 2025, so rather than post a new question I thought it cleaner to add to this conversation. For now I have settled for adding a sleep into my code to make it wait for the duration of the track. Each track object contains its duration so this is easy enough. But it is a klunky, highly volatile, solution. Pausing the track messes it up, for example.

So here's where I'm hoping some smarter people than me can weigh in. There are 2 other potential fixes I have noticed in my testing. Developer Tools are your friend here.

First, the index.js script that gets loaded into the hidden iframe DOES contain definitions for item_end and track_ended. But they don't seem to be emitting to the parent. I don't know if this is a bug or intentional by Spotify. But I do see in the network traffic a POST event from fetch to https://cpapi.spotify.com/v1/client/{client_id}/event/item_end so the event is firing, it's just not getting back to our app code from the embedded player. I wasn't successful in any attempts to intercept that fetch() call as a way to determine the track had ended. I presume this is also because it's happening on the hidden iframe and I couldn't figure out how to access it.

Second, in Chromium-based browsers anyway, the embedded player logs typical events like load, play, pause, and ended, as viewable in the Developer Tools Media tab. (https://chromium.googlesource.com/chromium/src/+/refs/heads/main/media/base/media_log_events.h) If there's a way to listen for these library calls then that's a possibility too.