I’m working on a web app that uses Spotify’s embedded player. When users add tracks to a playlist and hit play, everything works great with the desktop app. But I’m running into issues when trying to modify the playlist while music is playing.
Here’s my current setup for the embedded player:
<iframe src="https://open.spotify.com/embed/playlist/custom?tracks=<%=@song_collection%>" width="300" height="400" frameborder="0"></iframe>
The @song_collection variable contains track IDs joined with commas. Playback starts correctly on the desktop application.
The issue happens when @song_collection gets updated during playback. I use AJAX to modify the playlist, and my web interface shows the changes right away. The iframe also updates to display the new track list. But the desktop client keeps showing the original playlist and continues playing the old songs.
The only workaround I’ve found is manually clicking the forward button on the widget, which forces the desktop app to sync. Is there a programmatic way to trigger this sync without user interaction?