How to control Spotify embedded player with custom button in React?

Other Questions Spotify
1

I’m trying to create a custom play/pause button that controls a Spotify embedded player in my React app. Right now I have an iframe displaying the Spotify player but I can’t figure out how to make my own button interact with it.

<iframe
  className="music-player fixed bottom-4 right-4"
  src={spotifyUrl}
  width="320"
  height="80"
  frameBorder="0"
  allowFullScreen
  allow="encrypted-media"
/>

I also tried using the Spotify Web Playback SDK but ran into issues. The embed URL format I’m using is https://open.spotify.com/embed/track/${trackId}?utm_source=generator and it seems like the SDK doesn’t work with this type of URL.

window.onSpotifyWebPlaybackSDKReady = () => {
  const player = new Spotify.Player({
    name: 'My Custom Player',
    getOAuthToken: callback => { callback(token); }
  });
  
  player.connect();
};

Is there a way to make this work or should I use a different approach? Any help would be appreciated!

2

Had this exact problem a few months ago and wasted way too much time trying to make the iframe work with custom controls. The iframe approach is basically a dead end because of security restrictions - you can’t communicate with content from a different domain. What worked for me was implementing the Web Playback SDK properly, but there are some gotchas. First, make sure your Spotify app has the Web Playback SDK enabled in the dashboard settings. Second, the token needs streaming scope permissions, not just basic read permissions. Also, don’t try to use embed URLs with the SDK - you need to use the regular Spotify Web API to get track info and then play it through the SDK player instance. The learning curve is steeper but you get full control over playback.

3

To effectively control the Spotify embedded player, it’s crucial to switch from using iframes to the Web Playback SDK. If you’re facing issues, ensure you’ve enabled the SDK in your Spotify app settings and obtained a Premium user token with the appropriate permissions. The SDK does not support embedded URLs, so you’ll need to manage tracks separately through the SDK. It’s understandable to feel frustrated if you’re trying to blend the iframe method with the SDK, as they serve distinct purposes and cannot be integrated.

4

sounds like u’re stuck! yeah, iframes won’t let u control stuff due to cross-origin issues. that SDK is what u need, but u gotta ditch the iframe entirely. use the SDK to create a player it allows more control. good luck!