iFrame API for Tracks (not podcasts)

[yaoguais]

Hi Spotify Team! 

My Question or Issue

With the release of the iFrame API for podcasts, I was wondering if there's anything similar for non-podcasts, such as individual music tracks, or if there's anything planned down the line.

Thanks! 

[dderiso]

Embeds Intro Page :

Using an Embed, you can add a podcast, an album, or other audio content on your website that your users can listen to. It's a great way to promote your music, share your new podcast episodes with fans, or highlight your favorite album or playlist.

---

If the intention is to be able to play music tracks, why are non podcast URIs rejected in the iframe code? 

Source ball: https://open.scdn.co/cdn/build/embed-iframe-api-v1.f175fcd3.js

Function: "loadUri"

Error: "embed-iframe-api-v1.f175fcd3.js:formatted:1310 Uncaught Error: spotify:track:4fpxnJGDWFxjGvLJOqPPt8 is not a valid Spotify podcast URI."

Cause: 

T(this, "loadUri", (function(e) {
    if (e !== f.currentUri) {
        var t = a().from(e);
        if (!t || t.type !== a().Type.EPISODE && t.type !== a().Type.SHOW)
            throw new Error("".concat(e, " is not a valid Spotify podcast URI."));
        f.loading = !0;
        var r = "".concat(f.host, "/embed-podcast/").concat(t.type, "/").concat(t.getBase62Id());
        if (f.options.startAt) {
            var n = parseInt(f.options.startAt, 10);
            isNaN(n) || (r += "?t=".concat(n))
        }
        f.iframeElement.src=r
    }
}
)),

[dderiso]

Looking deeper, it seems like tracks use embed-legacy.js, which doesn't share the same code as the podcast's embed.js. Further, command messages are passed to the iFrame using contentWindow.postMessage, which seems to have issues where the iFrame does not receive and/or act on the messages.

I'd avoid this API until the dev team posts some updates.

[g_shiit]

any news on this subject ? 

[BealeSnow]

I've been wondering the same. In your dev guides you advice us to use the code below. But as soon as you use a track URI (f.e. spotify:track:2hKdd3qO7cWr2Jo0Bcs0MA), it doesn't work anymore. Seems like we need to replace the script source. Would be great if the correct one could be provided.

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

    </script>

    <script type="text/javascript">

      window.onSpotifyIframeApiReady = (IFrameAPI) => {

        let element = document.getElementById('embed-iframe');

        let options = {

            width: '60%',

            height: '200',

            uri: 'spotify:episode:3jv36updcfHw2rBFwZCcVu'

          };

    </script>

[mkmuzikorad1]

Same issue here, the docs do mention support for track, album, playlist embeds, but only the podcast use-case is shown. Without a documented alternative to the "https://open.spotify.com/embed-podcast/iframe-api/v1" script for non-podcast content this API is unfortunately misleading and unusable.

[kunal-dev]

Faced the same issue in my project. Had to go back to web embeds(direct iframe elements) but they dont have a controller. Moreover autoplay not working on them.

[fredyb97]

I'm facing the same issue and would like to use tracks instead of podcasts. 

[magic6435]

I'm in the middle of teaching a class and a bunch of the students wanted to also use the iframe API. Sadness. 

Incase anyone else is stuck you can still embed dynamically using the oembed way 

    const music = document.getElementById("music");

      function changeSong(url) {
        fetch(`https://open.spotify.com/oembed?url=${url}`)
          .then((response) => response.json())
          .then((data) => {
            console.log(data);
            music.innerHTML = data.html;
          });
      }

changeSong(YOURSONGURLHERE)

[lachlansleight]

Unfortunately, the docs don't say that we can use the iFrame API for anything other than podcasts. The page says:

Using an embed, you can add a podcast, an album, or other audio content on your website that your users can listen to.

---

And later says:

Using our iFrame API, you can create web apps that dynamically load, play and pause Spotify podcast episodes in an Embed.

i.e. embedding a normal iFrame (without play, seek, etc controls) is for any spotify content, but the iFrame API is only for podcast episodes.

[locii]

Bumping an old thread but this seems to be possible now.

<button data-spotify-id="spotify:track:15Pb9zPDU8AIhvXVxBFuwr">

Play the track

</button>

[jakebaldwin17]

Hi, I have an embed iframe where I set the srcdoc to be the embed I get from the endpoint based on a tracksID, but playback on the iframe is still not working, gives a 503, and if I click the link it queries it says 'no token'. That being said is there any way to have a track embed playback work?