Skip to content

iFrame API

Methods

window.onSpotifyIframeApiReady(object)

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) which you can use to create controllers.

Parameters

ParameterTypeDescription
IFrameAPIobjectObject you can use to create iFrame API controllers

Code sample


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


IFrameAPI.createController(element, options, callback)

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

Parameters

ParameterTypeDescription
elementobjectDOM element that you'd like replaced by the Embed
optionsobjectKey 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.
callbackfunctionFunction that receives the created controller object (EmbedController in the following examples)

Code sample


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


EmbedController.loadUri(spotifyUri)

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

Parameters

ParameterTypeDescription
spotifyUristringString of a podcast episode URI you'd like to load in the Embed
preferVideobooleanAn optional parameter to play the video of a podcast episode, if available
startAtnumberThe timestamp (in seconds) from where playback should start when the play method is called

Code sample


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


EmbedController.play()

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

Code sample


_10
EmbedController.play();


EmbedController.pause()

This method pauses playback.

Code sample


_10
EmbedController.pause();


EmbedController.resume()

If playback is paused, this method can be used to resume it. If playback was not started, this method will start playback.

Code sample


_10
EmbedController.resume();


EmbedController.togglePlay()

This method toggles between play and pause.

Code sample


_10
EmbedController.togglePlay();


EmbedController.restart()

Use this method to restart playback from the beginning.

Code sample


_10
EmbedController.restart();


EmbedController.seek(seconds)

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

Parameters

ParameterTypeDescription
secondsintegerThe number of seconds into the podcast episode after which you would like to move the cursor

Code sample


_10
EmbedController.seek(200);


EmbedController.destroy()

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

Code sample


_10
EmbedController.destroy();


Events

ready

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

Code sample


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


playback_update

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


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