Announcements

Help Wizard

Step 1

NEXT STEP

FAQs

Please see below the most popular frequently asked questions.

Loading article...

Loading faqs...

VIEW ALL

Ongoing Issues

Please see below the current ongoing issues which are under investigation.

Loading issue...

Loading ongoing issues...

VIEW ALL

iFrame API for Tracks (not podcasts)

iFrame API for Tracks (not podcasts)

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! 

Reply
9 Replies

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
    }
}
)),

 

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.

any news on this subject ? 

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>
    <script type="text/javascript">
      window.onSpotifyIframeApiReady = (IFrameAPI) => {
        let element = document.getElementById('embed-iframe');
        let options = {
            width: '60%',
            height: '200',
            uri: 'spotify:episode:3jv36updcfHw2rBFwZCcVu'
          };
    </script>

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.

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.

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

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)





 

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.

Suggested posts