Embed player postMessage API

The Acast Embed Player has a simple postMessage API that can be used to control the player. This is a protocol that allows communication between an iFrame (the Acast Embed Player) and the 'parent' (the website which embeds the player).

You do not need an API key to use the postMessage API.

The API uses the following commands:

const iframe = document.querySelector('iframe');
const message = {
eventName: '',
data: {},
};
iframe.contentWindow.postMessage(JSON.stringify(message), '*');

You can listen to the message event to get the data sent by the player. For instance, when you query the player with a postmessage:get:* event, it will dispatch the value back. Or events, such as postmessage:on:play and dispatched when the episode is playing.

window.addEventListener(
'message',
event => {
console.log(event.data); // >> { eventName, data }
},
false
);

API Details

Load the metadata

{

eventName: 'postmessage:do:loadmetadata'

}

Load the audio

{

eventName: 'postmessage:do:load'

}

Play the episode

{

eventName: 'postmessage:do:play'

}

Play a given episode

{

eventName: 'postmessage:do:play',

data: { show: 'show-name', episode: 'episode-name' }

}

Pause

{

eventName: 'postmessage:do:pause'

}

Toggle play/pause

{

eventName: 'postmessage:do:toggle'

}

Seek a given position

{

eventName: 'postmessage:do:seek',

data:{ position: 10 }

}

Seek 15s forward

{

eventName: 'postmessage:do:seekforward'

}

Seek 15s back

{

eventName: 'postmessage:do:seekback'

}

Get current episode

{

eventName: 'postmessage:get:current'

}

Get episode duration

{

eventName: 'postmessage:get:duration'

}

Get episode duration

{

eventName: 'postmessage:get:progress'

}

Get the playing state

{

eventName: 'postmessage:get:isplaying'

}

Did this answer your question?