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&&size=detail&theme=light" style="border:0px #ffffff none;" name="myiFrame" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen=""></iframe>
Thanks!!
Advertisement
Answer
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.