See Using the iFrame API for information about implementing the iFrame API.

Methods

Events

Methods

window.onSpotifyIframeApiReady(object)

Parameters

Parameter Type Description
IFrameAPI object Object you can use to create iFrame API controllers

Description

Define this global function so that your app knows when the iFrame API is ready to use. It receives an object (IFrameAPI in our example) that you can use to create controllers.

Code sample

window.onSpotifyIframeApiReady = (IFrameAPI) => {
  let element = document.getElementById('embed-iframe');
  let options = {
      uri: 'spotify:episode:7makk4oTQel546B0PZlDM5'
    };
  let callback = (EmbedController) => {};
  IFrameAPI.createController(element, options, callback);
};

IFrameAPI.createController(element, options, callback)

Description

Call createController for each Embed that you’d like to position on the web page.

Parameters

Parameter Type Description
element object DOM element that you’d like replaced by the Embed
options object Key value pairs that configure the new controller. The available options are uri, the Spotify URI of the content you’d like loaded first; width, the width in pixels of the Embed, and height, the height in pixels of the Embed. See the sample below for an example.
callback function Function that receives the created controller object (EmbedController in the following examples)

Code sample

let element = document.getElementById('embed-iframe');
let options = {
  width: 200,
  height: 400,
  uri: 'spotify:episode:7makk4oTQel546B0PZlDM5'
};
let callback = (EmbedController) => {};
IFrameAPI.createController(element, options, callback);

EmbedController.loadUri(spotifyUri)

Parameters

Parameter Type Description
spotifyUri string String of a podcast episode URI you’d like to load in the Embed

Description

Use this method to load a new podcast episode into an Embed that you have created.

Code sample

EmbedController.loadUri('spotify:episode:7makk4oTQel546B0PZlDM5');

EmbedController.play()

Description

This method begins playing the content that had been previously loaded.

Code sample

EmbedController.play();

EmbedController.togglePlay()

Description

This method toggles between play and pause.

Code sample

EmbedController.togglePlay();

EmbedController.seek(seconds)

Parameters

Parameter Type Description
seconds integer The number of seconds into the podcast episode after which you would like to move the cursor

Description

Use this method to seek to a given point in the podcast episode that has been loaded in the Embed.

Code sample

EmbedController.seek(200);

EmbedController.destroy()

Description

Destroys the Embed and removes its DOM element from the page.

Code sample

EmbedController.destroy();

Events

ready

Description

This event fires after an Embed has initialized and is ready to stream content

Code sample

EmbedController.addListener('ready', () => {
  console.log('The Embed has initialized');
  });

playback_update

Description

This event fires after the state of playback changes. Playback state changes can occur by the user tapping on the playback controls in the Embed, or programmatically through methods of the iFrame API, such as the seek() method.

The event handler will receive an object with four properties describing the current playback state: isPaused (bool), isBuffering (bool), duration (number) and position (number). duration describes the length of the loaded podcast episode in miliseconds and position describes the cursor location in miliseconds.

Code sample

EmbedController.addListener('playback_update', e => {
  document.getElementById('progressTimestamp').innerText = `${parseInt(e.data.position / 1000, 10)} s`;
  });