Audio versions help readers keep moving through a story while they cook, commute, or rest their eyes between tasks.
React package
Text to Speech Highlight for React and Next.js
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.
Features
A React player that keeps setup light.
The package is built for app developers who want a predictable component, simple configuration, and an easy path from prototype to hosted audio.
React component API
Mount the player beside an article ref instead of manually scanning the DOM.
Next.js friendly
Use browser speech first, or pass a server resolver that calls your own API route.
Any Audio Source
You can use any audio source you want like OpenAI, ElevenLabs, AWS Polly, Google Cloud TTS, or our managed TTS service ReinventWP Cloud Pro.
UI based code generator
Generate a real code snippet from our config editor and paste it into the website.
Implementation
Install, pass a ref, ship the player.
The simple setup uses browser speech plus a public site key, so React developers can validate the component before adding hosted audio.
Install
Add the package to your app.
npm install @reinventwp/text-to-speechSimple React component
Minimal config, one public site key, one article ref.
"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>
</>
);
}What you need to do
1.
Install the @reinventwp/text-to-speech package.
2.
Buy any plan from the pricing section.
3.
Go to the Text To Speech dashboard.
4.
Create a project, add your domain, and copy the public site key.
5.
Create an articleRef and pass it with publicKey to ReinventTTS component.
6.
Wrap the content in an article element.
Code generator
Configure it visually, copy React code.
Use the controls on the right to generate the component snippet on the left. It is designed to be copied straight into your app.
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:
Read section
Which sections of your page will be read?
Altering Text
Edit text before sending it to the TTS API. The text will processed with the following sequence steps:
Exclude HTML Selectors
script
style
noscript
code
pre
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
Spoken Prefix
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.
Need a custom text-to-speech solution?
High Trafic Website? Enterprise? Our team can help you integrate the technology into your application.
Email us at reinventwp@gmail.com to discuss your requirements and get a personalized solution.