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!!
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.
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.