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.
Give every reader another way to follow your story. Keep each word in focus.
Get 40,000 hosted characters for 14 days. No credit card required.
How many site do you have? Every license includes the complete Pro feature set. Choose a billing cycle, then select the number of sites.
Not ready to pay? Start with the free trial
1 site
$6
per month
Perfect for personal websites and solo projects.
5 sites
Most chosen
$20
per month
Ideal for freelancers and solo entrepreneurs managing multiple sites.
20 sites
$120
per month
Best for agencies and businesses handling multiple client websites.
Use your own TTS provider API key anytime
Plugin license
The price listed above is only for the NPM package access.
Third-party provider usage may have separate fees depending on the service you choose and your own API usage.
Bring your own provider
Connect your own third-party Text-to-Speech provider with your own API key, such as Google TTS, OpenAI TTS, ElevenLabs, Amazon Polly, or Azure TTS.
Managed Cloud PRO and refunds
Active monthly or annual subscriptions include 40,000 Reinvent WP Cloud PRO characters per month at no extra cost and with no API key required.
Refund within 14 days. Please refer to our refund policy for more details.
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
Hear the voices
Get 40,000 hosted characters for 14 days. No credit 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.
Ready to subscribe? Choose a plan. Not ready to pay? Start with the free trial—40,000 hosted characters for 14 days, no card required.
Finish creating your project in the Text to Speech dashboard, then copy its 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 40,000 hosted characters for 14 days. No credit 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
Tell us what you need. Include enough detail for us to understand your question and help you faster.
Prefer email? Write to support@reinventwp.com