Audio versions help readers keep moving through a story while they cook, commute, or rest their eyes between tasks.
Universal JavaScript
Text to Speech Highlight JavaScript Library
Add a text to speech player that highlights sentences and words as they are being spoken on any website. Works with any TTS API, including OpenAI, ElevenLabs, custom backends, or ReinventWP Cloud.
Features
A small embed with the important parts handled.
The JavaScript embed is for developers who want a working player quickly, without turning a content page into a full app.
Works on plain websites
Use it on static sites, CMS templates, custom PHP, or any page that can load a script.
Reader-friendly playback
The player can read the article, follow the page, and highlight content while it speaks.
Backend optional
Start with browser speech, bring your own resolver, or use ReinventWP Cloud later.
Configurable without guesswork
Generate a real snippet from the UI and paste it into the website.
Implementation
Paste the script, point it at your article.
This is the smallest useful setup. It uses browser speech with a public site key so developers can test the player before enabling hosted audio.
Simple JS embed
A minimal config that works on a page with an article element.
<script src="https://reinventwp.com/js/text-to-speech/latest.js"></script>
<div class="natural-tts" data-target-tts-selector="article"></div>
<script>
window.ReinventTTS.init({
publicKey: "rwp_public_xxx",
pluginConfig: {
audio_source: "browser",
read_title: true
}
});
</script>What the developer does
1.
Add the hosted script before the closing body tag.
2.
Buy any plan from the pricing section.
3.
Go to the Text To Speech Cloud dashboard.
4.
Create a project, add your domain, and copy the public site key.
5.
Make sure the article content is inside <article>.
6.
Paste the init config and refresh the page.
Code generator
Use the UI, copy the JavaScript embed.
Use the controls on the right to generate the embed snippet on the left. Preview the player first, then copy the code into your website.
Try it out!
Go to the Text To Speech Cloud dashboard to get the public key.
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.