Add a text to speech player that highlights sentences and words as they are being spoken in React and Next.js apps. Works with any TTS API like OpenAI, ElevenLabs, ReinventWP Cloud, etc.
Highlight preview
Give every reader another way to follow your story. Keep each word in focus.
Explore highlighting
Get a public site key and 40,000 hosted characters for 14 days.
No card required.
Give every visitor a simple choice: read your content or listen to it.
Some visitors find long articles difficult to read. Audio gives them a simpler way to enjoy your content.
See the fact
W3C technique
W3C recognizes a spoken version as one way to make difficult written content more accessible.
See W3C guidanceVisitors who listen stay 2-3x longer than those who skim. Audio holds attention through the full article, extending time on page and improving the engagement signals search engines value.
See the fact
9:31 vs 3:51
One publisher saw audio listeners spend 9 minutes 31 seconds on site, compared with 3 minutes 51 seconds for readers.
Read the publisher storyPeople can follow your posts while commuting, exercising, cooking, or doing anything away from a screen.
See the fact
131 million daily
Edison Research estimates that 131 million people in the U.S. listen to spoken-word audio every day.
See the audience reportVisitors who press play are far less likely to leave. Natural AI voices keep them through the full article, while robotic-sounding tools cause people to bounce within seconds.
See the fact
Listeners stayed longer
The publisher reported that audio listeners spent much longer on the site—a useful sign that people were not leaving immediately.
Read the publisher storyA light component, simple configuration
Get a public site key and 40,000 hosted characters for 14 days.
No card required.
One package, a public site key, and an article ref. Start with browser speech before adding hosted audio.
Add @reinventwp/text-to-speech to your app.
Buy a plan from the pricing section, then open the Text to Speech dashboard.
Create a project, add your domain, and copy the public site key.
Create an articleRef, pass it with your publicKey to ReinventTTS, and attach the ref to your article element.
npm install @reinventwp/text-to-speechTypeScript
"use client";
import ReinventTTS from "@reinventwp/text-to-speech";
import { useRef } from "react";
/**
* Generate public config visually with our config editor:
* https://reinventwp.com/text-to-speech/npm#code-generator
*/
const pluginConfig = {
audio_source: "browser",
read_title: true
};
// Get public key on https://reinventwp.com/dashboard/text-to-speech
const publicKey = "rwp_public_xxx";
export default function ArticlePage() {
const articleRef = useRef<HTMLElement | null>(null);
return (
<>
<ReinventTTS
target={articleRef}
publicKey={publicKey}
pluginConfig={pluginConfig}
/>
<article ref={articleRef}>...</article>
</>
);
}Adjust the settings, preview the player, then switch to Code to copy a TypeScript component for your app.
Audio versions help readers keep moving through a story while they cook, commute, or rest their eyes between tasks.
Go to the Text To Speech dashboard to get the public key. You must insert a valid public key to use the tts player.
Plugin config:
Which sections of your page will be read?
Edit text before sending it to the TTS API. The text will processed with the following sequence steps:
Exclude HTML Selectors
Enter HTML selectors, then press Enter to add. You can also paste comma or space-separated values.
Exclude Texts
Enter text or words to exclude, then press Enter to add
Global Text Spoken Form
Example: Displayed =WP → Spoken form = WeePeeCase Sensitive
Automatically say a short phrase before matched content such as image captions.
Caption Spoken Prefix Rules
Example: selectors =figcaption, prefix = Image showcasingNo spoken prefix rules yet. Add one to automatically say something like Image showcasing before matched caption text.
Get a public site key and 40,000 hosted characters for 14 days.
No card required.
Ask questions, share implementation issues, and help shape the next Text to Speech examples.
Running a high-traffic website or planning an enterprise integration? We can help you fit the technology to your application.
reinventwp@gmail.com