Le player embarqué postMessage API
Le player embarqué Acast dispose d'une API postMessage simple qui peut être utilisée pour contrôler le player. Il s'agit d'un protocole qui permet la communication entre un iFrame (le player embarqué Acast) et le "parent" (le site web qui intègre le player).
Vous n'avez pas besoin d'une clé API pour utiliser l'API postMessage.
Lorsque vous utilisez l'API postMessage pour reproduire l'audio, vous devez inclure l'attribut allow="autoplay" dans le iframe tag. Cela ne lancera pas automatiquement la lecture, mais il permettra au player de reproduire l'audio même si l'utilisateur n'a pas interagi avec le player.
Exemple :
<iframe allow="autoplay" src="https://embed.acast.com/show/episode"></iframe>
Plus d'information à ce sujet ici : https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#iframe
L'API utilise les commandes suivantes :
const iframe = document.querySelector('iframe');
const message = {
eventName: '',
data: {},
};iframe.contentWindow.postMessage(JSON.stringify(message), '*');
Vous pouvez écouter l'événement de message pour obtenir les données envoyées par le player. Par exemple, lorsque vous demandez le player avec un événement postmessage:get:*, il renverra la valeur. Ou des événements, tels que postmessage:on:play qui sont déclenchés lorsque l'episode est en cours de lecture.
window.addEventListener(
'message',
event => {
console.log(event.data); // >> { eventName, data }
},
false
);
Details de l'API
Déclencheurs d'événements
Charger le metadata
{
eventName: 'postmessage:do:loadmetadata'
data: { show: 'show-name', episode: 'episode-name' }
}
Déclenche l'événement `postmessage:on:loadmetadata`.
Charger l'audio
{
eventName: 'postmessage:do:load'
}
Déclenche l'événement `postmessage:on:load`.
Reproduire l'épisode
{
eventName: 'postmessage:do:play'
}
Déclenche l'événement `postmessage:on:play` .
Reproduire un épisode donné
{
eventName: 'postmessage:do:play',
data: { show: 'show-name', episode: 'episode-name' }
}
Déclenche l'événement `postmessage:on:play` .
Pause
{
eventName: 'postmessage:do:pause'
}
Déclenche l'événement `postmessage:on:pause` .
Basculer play/pause
{
eventName: 'postmessage:do:toggle'
}
Déclenche l'événement `postmessage:on:play` ou `postmessage:on:pause` .
Rechercher une position donnée
{
eventName: 'postmessage:do:seek',
data:{ position: 10 }
}
Déclenche l'événement `postmessage:on:seek`.
Avancer de 15 secondes
{
eventName: 'postmessage:do:seekforward'
}
Déclenche l'événement `postmessage:on:seek`.
Reculer de 15 secondes
{
eventName: 'postmessage:do:seekback'
}
Déclenche l'événement `postmessage:on:seek`.
Obtenir les demandes
Obtenir l'épisode en cours
{
eventName: 'postmessage:get:current'
}
Corps de la réponse :
{
acast: “5930eq94f9ga90df”, //show id
channel: “sd9f8233fg9ogx”, //episode id
episode: “5930eq94f9ga90df”,
show: “sd9f8233fg9ogx”
}
Obtenir la duration de l'épisode
{
eventName: 'postmessage:get:duration'
}
Corps de la réponse :
{
duration: 100.304
}
Obtenir la progression de l'épisode
{
eventName: 'postmessage:get:progress'
}
Corps de la réponse :
{
progress: 9.134
}
Obtenir l'état de lecture
{
eventName: 'postmessage:get:isplaying'
}
Corps de la réponse :
{
acast: “5930eq94f9ga90df”, //show id
channel: “sd9f8233fg9ogx”, //episode id
episode: “5930eq94f9ga90df”,
isPlaying: true,
show: “sd9f8233fg9ogx”,
}
Événements d'écoute
sur: loadmetadata
Corps de la réponse :
{
acast: “episode-name”,
channel: “show-name”,
episode: “episode-name”,
show: “show-name”
}
Cet événement ne renvoie que les valeurs passéss dans `do:loadmetadata`. Pour obtenir le metadata existante, utilisez `on:load`/`on:play`.
on:load
Corps de la réponse :
{
acast: “episode-name”,
channel: “show-name”,
episode: “episode-name”,
show: “show-name”
}
on:play
Corps de la réponse :
{
acast: “episode-name”;
channel: “show-name”,
episode: “episode-name”
show: “show-name”
}
on:pause
Aucun corps de réponse renvoyé
on:seek
Corps de la réponse :
{
position: 10.034
}