iFrame API
See Using the iFrame API for information about implementing the iFrame API.
Methods
- window.onSpotifyIframeApiReady(IFrameAPI)
- IFrameAPI.createController(element, options, callback)
- EmbedController.loadUri(spotifyUri)
- EmbedController.play()
- EmbedController.togglePlay()
- EmbedController.seek(seconds)
- EmbedController.destroy()
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`;
});