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.

When using the PostMessage API to play the audio, you need to include the `allow= "autoplay"` attribute on the iframe tag. It won't autoplay the audio but permit the player to play the audio even if the user didn't interact with the player.

Example:

```
<iframe allow="autoplay" src="https://embed.acast.com/show/episode"></iframe>
```

More information on this here: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#iframe

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?