Iframe embedcontroller.play() broken

[pbrouwer]

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!

[sushants · Accepted solution]

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

[sushants · Accepted solution]

This should be fixed now. Thanks!

[pbrouwer]

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

[algoflows]

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.

[algoflows]

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

[algoflows]

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

[algoflows]

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.

[sushants]

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

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

[algoflows]

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

[sushants]

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.

<script src="https://open.spotify.com/embed/iframe-api/v1" async></script>

<div id="embed-iframe"></div>

<button>Play</button>
<script>
  let controller;

  window.onSpotifyIframeApiReady = IFrameAPI => {
    const element = document.getElementById('embed-iframe');
    const options = {
      uri: 'spotify:track:7J1uxwnxfQLu4APicE5Rnj',
    };
    const callback = EmbedController => {
      controller = EmbedController;
      controller.addListener('ready', () => {
        console.log('ready');
      });
    };
    IFrameAPI.createController(element, options, callback);
  };

  document.querySelector('button').onclick = function () {
    // controller.loadUri("spotify:track:7J1uxwnxfQLu4APicE5Rnj");
    controller.play();
  };
</script>

[algoflows]

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.

[pbrouwer]

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

[sushants]

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

[pbrouwer]

@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:

<script src="https://open.spotify.com/embed/iframe-api/v1"></script>

<div id="iframe-embed"></div>

<script>
  const iframe = document.getElementById('iframe-embed');
  const options = {
    theme: 'dark',
    width: 200,
    height: 400,
    uri: 'spotify:episode:7makk4oTQel546B0PZlDM5'
  }
  
  const player = spotify.createIframePlayer(iframe, options);

  // listen to ready
  player.addEventListener('ready', () => {
    console.log('player instantiated');
  });
  
  // load uri promised based
  player.loadUri('spotify:episode:7makk4oTQel546B0PZlDM5').then(() => {
    // loaded
  });

  // default playback controls
  player.play();
  player.seek();
  player.resume();
  player.pause();
  
  // destroy player & iframe
  player.dispose();
</script>