Methods Introduction

The Speechify Embeddable has several useful methods that allow for various actions to be performed, configuration updated, and information to be fetched.

Example

Here's an example that mounts the player, updates the configuration to make the play button red after 5 seconds, and hides the inline player after 15 seconds:

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

  // mount the player with the mount method
  await widget.mount();

  // update config after 5 seconds
  setTimeout(async () => {
    await widget.updateConfiguration({
      customStyles: { playButton: { backgroundColor: "#ff0000" } },
    });
  }, 5000);

  // hide the inline player after 15 seconds
  setTimeout(async () => {
    await widget.hideInlinePlayer();
  }, 15000);
});

Methods

Below are all the built-in methods in the Speechify Embeddable (aside from addEventListener described in Events) that can used.

📄️ Update Configuration

If you'd like to update the configuration after the widget is configured, there's a simple method to do this:

📄️ Play, Pause, or Skip

To play, pause, or skip audio on the player, simply use the following methods:

📄️ Player Visibility

We provide several methods to hide and show the player or widget. Here's a quick list of methods to change player visibility:

📄️ Get Player State

One common use-case for publishers is the fetch the current state of the player and the listening experience. We make this simple using one function: getPlayerState().

📄️ Mount & Unmount

To mount or unmount the player, simply use the following methods: