Skip to main content

Events Introduction

Events are added using the addEventListener method on the Speechify API widget object. This method looks like:

SpeechifyWidget.addEventListener((event: SpeechifyExperienceEvent, playerState?: PlayerState) => void)

Example​

Here's an example that listens to play and pause events and logs to the console accordingly:

import(
  "{CDNLinkToLibrary}"
).then(async (speechifyWidget) => {
  // initialize and mount the widget
  const widget = speechifyWidget.makeSpeechifyExperience({
    rootElement: document.getElementById("article"),
    useSpeechifyRoot: true,
  });
  await widget.mount();

  // log to the console whenever the article is played or paused
  widget.addEventListener((event, playerState) => {
    if(event.type === 'play') {
      console.log("The Speechify API is playing.");
    }
    else if(event.type === 'pause') {
      console.log("The Speechify API was paused.");
     }
  });

});

Event Object​

The event object passed into each callback is the SpeechifyPlayerState object, which is documented on the Player State page.

This object includes useful information like whether the player is playing or paused, the current audio progress, and whether the player is visible.

Available Events​

Below are links to all the events that can be listened to in the Speechify API.