Configuration Introduction

Configuration is set when initializing the widget object, and it can be updated at any time with the updateConfiguration method.

The configuration object has many options, all of which are detailed in this section.

The rootElement configuration property is required, and the inlinePlayerElement configuration property is required to add the inline player. All other properties are completely optional and have defaults set by the Speechify API internally.

Example

Here's a simple example that initializes the player with configuration and mounts it. With this example configuration:

The content within the parent element with the ID article will be listenable
The inline player will be mounted and displayed right under the element with the ID article-title
The play button will be enlarged by 10% with a scale transform

import(
  "{CDNLinkToLibrary}"
).then(async (speechifyWidget) => {
  // widget configuration
  const config = {
    rootElement: document.getElementById("article"),
    useSpeechifyRoot: true,
    customStyles: {
      playButton: "transform: scale(1.1)",
    },
  };
  // initialize the widget with config and mount it on the page
  const widget = speechifyWidget.makeSpeechifyExperience(config);
  await widget.mount();
});