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.

Example

Here's an example in which all the elements within the element with the ID article are listenable except elements with the noscript tag and elements with the class name image-caption.

import(
  "{CDNLinkToLibrary}"
).then(async (speechifyWidget) => {
  // widget configuration
  const config = {
    useSpeechifyRoot: true,
    // this is the root listenable element that the Speechify API will traverse
    rootElement: document.getElementById("article"),
    // the Speechify API will call this method on each element and ignore elements for which this function returns true
    ignoreElements: (element) =>
      element.tagName === "NOSCRIPT" ||
      element.classList.contains("image-caption"),
  };
  // initialize the widget with config and mount it on the page
  const widget = speechifyWidget.makeSpeechifyExperience(config);
  await widget.mount();
});

Root Listenable Element

The rootElement property defines the root listenable element.

When the Speechify API finds listenable content, it will traverse the entire tree structure of the root element and make all of the content listenable, unless it is specifically ignored with your ignoreElements property.

Ignore Elements In Parsing

The ignoreElements property defines a function that returns true if a given element should be ignored by the Speechify API when making content listenable.

The Speechify API traverses the document tree sequentially, and will call ignoreElements for every element it traverses. If the function returns true, the Speechify API will ignore all of the content within the element, including the content of that element's children. In fact, the Speechify API will not traverse an element's children if it is ignored by the ignoreElements function.

Note: Please pay attention to the case sensitivity when comparing options such as tagName. Tag names are always uppercase as described here