1

Can someone explain me how can I play and pause this spotify embed object? I have tried to find the id of the player but I couldn't.

URL → https://open.spotify.com/embed-podcast/show/5iKz9gAsyuQ1xLG6MFLtQg

This is the iframe code: 

<iframe src="https://open.spotify.com/embed/show/5iKz9gAsyuQ1xLG6MFLtQg?utm_source=generator&amp&size=detail&amp;theme=light" style="border:0px #ffffff none;" name="myiFrame" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen=""></iframe>

Thanks!!

Clifford
  • 88,407
  • 13
  • 85
  • 165
JaviR3TicS
  • 35
  • 5

3 Answers3

4

It is odd that I couldn't find this documented anywhere, but I was able to look through the embed code to figure out that it listens for postMessage events for cross-origin communication and your request is possible.

The general code would be:

// Get a reference to the embed iframe element
const spotifyEmbedWindow = document.querySelector('iframe[src*="spotify.com/embed"]').contentWindow;
spotifyEmbedWindow.postMessage({command: 'toggle'}, '*');

The above code should start the embed playing if it is paused or stopped, and pause it if it is already playing.

There are some other commands, but they probably aren't what you are looking for ('play', for example, actually restarts the player to the start of the track, and there is no explicit 'pause' command).

PS: It looks like Spotify has actually implemented this communication both ways - you can receive updates from the embed (for example, if you want to know if someone has paused it), by listening for 'message' events in the parent window.

Joshua T
  • 2,439
  • 1
  • 10
  • 42
  • I have tried only with {command: 'toggle'}, '*' on the original src url of the iframe, and it works!! Thanks so much!! – JaviR3TicS Apr 24 '22 at 18:58
0

You would use code like this, but it won't work because of cross-origin issues:

document.querySelector('iframe').contentWindow.document.body.querySelector('#play-button')

But you get: Uncaught DOMException: Permission denied to access property "document" on cross-origin object

So I believe this cannot be achieved - but I'd be happy to be proven wrong.

Slbox
  • 10,957
  • 15
  • 54
  • 106
0

As of 2023, Spotify provided their own APIs to achieve play/pause/seek/etc: https://developer.spotify.com/documentation/embeds/references/iframe-api

zhuhang.jasper
  • 4,120
  • 4
  • 21
  • 29