topic Re: Iframe embedcontroller.play() broken in Spotify for Developers

Iframe embedcontroller.play() broken

pbrouwer — Tue, 16 Jan 2024 23:45:02 GMT

Since today it’s not possible anymore to play the song via the embed controller. It did works before though

I’ve created a simple codepen example:

https://codepen.io/inlet/pen/oNVZvNa/4cbea3abe4d01ad9e2ded39e48dcd179

If the Spotify team can have a look at this that would be great, thanks in advance!

Re: Iframe embedcontroller.play() broken

sushants — Wed, 17 Jan 2024 16:25:51 GMT

Hi pbrouwer, thanks for highlighting this issue.

I'm an engineer working on the embed player and the iframe API. We are looking into this and should have a fix out soon. I'll keep you posted once the issue is fixed.

Thank you for your patience.

Regards,

Sushant

Re: Iframe embedcontroller.play() broken

sushants — Thu, 18 Jan 2024 08:21:45 GMT

This should be fixed now. Thanks!

Re: Iframe embedcontroller.play() broken

pbrouwer — Thu, 18 Jan 2024 08:31:20 GMT

I can confirm that it works again, thanks for the quick fix! 🙏

Re: Iframe embedcontroller.play() broken

algoflows — Tue, 23 Jan 2024 00:35:27 GMT

It doesn't work, Play() function doesn't work on embeds. I am completely stuck, all other functions work fine except for togglePlay() and Play(). loadUri works fine, but Play() not.

Re: Iframe embedcontroller.play() broken

algoflows — Tue, 23 Jan 2024 01:09:51 GMT

Its definitely not fixed!!!!!! Play() does not work.

Re: Iframe embedcontroller.play() broken

algoflows — Tue, 23 Jan 2024 01:12:45 GMT

Yo I need to hit deadlines and the most important thing in this embeded API doesn't work..... the play() functionality.

Re: Iframe embedcontroller.play() broken

algoflows — Tue, 23 Jan 2024 09:27:59 GMT

It is not fixed, the original example doesn't work either. I am stuck with an embed that doesn't play even after calling the .play() function.

Re: Iframe embedcontroller.play() broken

sushants — Tue, 23 Jan 2024 09:41:53 GMT

Have you checked whether the issue is with autoplay restrictions being applied?

https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide

Re: Iframe embedcontroller.play() broken

algoflows — Tue, 23 Jan 2024 10:11:36 GMT

<iframe
title="Spotify Embed"
style="border-radius:12px"
src={`https://open.spotify.com/embed/episode/${
selectedEpisode?.id || '1FMnK8XBsLRpTEOScXpwtQ'
}?utm_source=generator&theme=0`}
width="100%"
height="240"
frameBorder="0"
allow="autoplay; encrypted-media; clipboard-write; fullscreen; picture-in-picture"
loading="lazy"
></iframe>

Autoplay is set to true in the allow list - this embed is pulled straight from Spotify share episode/track button. The embed is being used within stock google Chrome. I am a software engineer, this is so unintuitive, this should be simple and very clear as its the base functionality you'd expect to be able to action when using the embed.

Why can't we get the embedded player controller to play() when we call the play function or either auto play tracks onload. I am not the only one having these issues and the issue isn't fixed!! Look at the the original example posted on this thread, it doesn't play.

Re: Iframe embedcontroller.play() broken

sushants — Tue, 23 Jan 2024 11:15:54 GMT

The reason it is not working in the codepen link above is because the way codepen works does not guarantee that the page script is loaded by the time the iFrame API loads. The iFrame API needs the global `onSpotifyIframeApiReady` function to be available when it loads because without it, it won't know how to let the application know that it is ready to be used. This is something we can look into improving in the future. Try using this HTML provided below and see if it works. This is essentially, the exact code provided in the codepen link, but I'm inlining the javascript to ensure that the `onSpotifyIframeApiReady` is present when the iFrame API loads.

Re: Iframe embedcontroller.play() broken

algoflows — Tue, 23 Jan 2024 12:47:06 GMT

We are using SvelteKit/Svelte in production, any guidance how we can implement it with a Svelte friendly solution? Also, how can we change the colour to the darker version using the option config, I can't see theme key available on there.

Re: Iframe embedcontroller.play() broken

pbrouwer — Tue, 23 Jan 2024 13:05:47 GMT

I've updated the codepen, weird thing is that it works on Safari now.. but on Chrome the Spotify player changes state (you see a pause button), but the song is not playing..

console log:

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page

Not sure what's causing the issue, it should play on button press. It used to work though

Re: Iframe embedcontroller.play() broken

sushants — Tue, 23 Jan 2024 13:35:11 GMT

@algoflows I'm not sure about it as of now. I can explore this and get back to you in a while but unfortunately can't make any promises. For the theme, we recently added the option "theme" whose value can be set to "dark" to get the darker variant but couldn't get around to updating the docs yet.

@pbrouwer This looks like the auto play restriction kicking in. May be how often auto play is triggered affects it in Chrome. Auto play restrictions are quite the black box across different browsers.

Re: Iframe embedcontroller.play() broken

pbrouwer — Wed, 24 Jan 2024 08:23:16 GMT

@sushants It seems that the iframe in Codepen (editor mode) prevents the audio from playing. If you run it in plain html (debug mode) it seems to work just fine. Here's a working demo: (without Codepen editor iframe): https://cdpn.io/pen/debug/oNVZvNa/4cbea3abe4d01ad9e2ded39e48dcd179

@algoflows The playback should run just fine as `https://open.spotify.com/embed/iframe-api/v1` is framework agnostic. Just make sure the `window.onSpotifyIframeApiReady` is set before the script is loaded.

@sushants The API feels a little but clunky to be honest. If I was the author of the lib I would write it in a different fashion, example: