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();
});
Configuration Options
Below are a links to documentation on all of our possible configuration options.
📄️ Colors & Styles
Customizing the design, styles, and theme of the widget player and inline player in the Speechify API is a common use-case for publishers. We make it super simple to customize the styles of elements in the Speechify API and add your own custom designs to the player.
📄️ Content & Parsing
The Speechify API provides two properties to define what content on your site should be listenable: a root listenable element (rootElement) to define where we should look for listenable elements, and a function to ignore particular elements (ignoreElements) that we traverse within the root listenable element.
📄️ Set Default Voice
To set the default voice of the Speechify API, you'll need to specify where it is placed on your site. To do so, add the configuration property defaultVoice and set it to the name of the voice you'd like to make default.
📄️ Player Visibility
You might want to show or hide the player based on whether the page is loaded or whether the article is playing. We provide several a configuration property called visibility to do this.
📄️ Autoscroll & Highlighting
Autoscroll and highlighting are key features of the Speechify ecosystem that make it easy for users to follow along while they listen. Both of these features are enabled by default.
📄️ Inline Player Placement
To show the Speechify API inline player, you'll need to specify where it is placed on your site.