android mediaplayer - How to play and pause Spotify embed with JAVASCRIPT? - Stack Overflow

admin管理员组

文章数量:1023273

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 →

This is the iframe code:

<iframe src=";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>

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./embed-podcast/show/5iKz9gAsyuQ1xLG6MFLtQg

This is the iframe code:

<iframe src="https://open.spotify./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!!

• javascript
• android-mediaplayer
• spotify

Share Improve this question Follow edited Apr 23, 2022 at 19:43 Clifford 93.8k1414 gold badges9292 silver badges171171 bronze badges asked Apr 23, 2022 at 13:00 JaviR3TicSJaviR3TicS 3511 silver badge66 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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 munication 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./embed"]').contentWindow;
spotifyEmbedWindow.postMessage({mand: '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 mands, 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' mand).

PS: It looks like Spotify has actually implemented this munication 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.

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

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.

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 →

This is the iframe code:

<iframe src=";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>

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./embed-podcast/show/5iKz9gAsyuQ1xLG6MFLtQg

This is the iframe code:

<iframe src="https://open.spotify./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!!

• javascript
• android-mediaplayer
• spotify

Share Improve this question Follow edited Apr 23, 2022 at 19:43 Clifford 93.8k1414 gold badges9292 silver badges171171 bronze badges asked Apr 23, 2022 at 13:00 JaviR3TicSJaviR3TicS 3511 silver badge66 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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 munication 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./embed"]').contentWindow;
spotifyEmbedWindow.postMessage({mand: '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 mands, 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' mand).

PS: It looks like Spotify has actually implemented this munication 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.

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

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.

本文标签： android mediaplayerHow to play and pause Spotify embed with JAVASCRIPTStack Overflow