Reinvent WP
BlogText to SpeechAI Agent
Login
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 like OpenAI, ElevenLabs, ReinventWP Cloud, etc.

Text to Speech DashboardReact version
Features

Just add a js script, and it works

We built the player that can work on any website.

Reader-friendly playback

The player can read the article, follow the page, and highlight content while it speaks.

Works on any websites

Use it on static sites, Custom CMS, Shopify, Joomla, PHP, Laravel, or any page that can load a script.

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

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.

<body>
  <div class="natural-tts" data-target-tts-selector="article"></div>

  <article>
    <h1>Article title</h1>
    <p>Article content...</p>
  </article>


  <script src="https://reinventwp.com/js/text-to-speech/latest.js"></script>

  <script>
    window.ReinventTTS.init({
      publicKey: "rwp_public_xxx",
      pluginConfig: {
        audio_source: "browser",
        read_title: true
      }
    });
  </script>

</body>

What you need to do

1.

Buy any plan from the pricing section.

2.

Go to the Text To Speech dashboard.

3.

Create a project, add your domain, and copy the public site key.

4.

Copy code snippet and set your public site key, then paste it into your HTML.

Generate my code using the config editor
Code generator

Use the UI, copy the JavaScript Code.

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.

Designing a calmer publishing workflow

By

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:

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 = WeePee

Case Sensitive

Spoken Prefix

Automatically say a short phrase before matched content such as image captions.

Caption Spoken Prefix Rules

Example: selectors = figcaption, prefix = Image showcasing

No spoken prefix rules yet. Add one to automatically say something like Image showcasing before matched caption text.

Join the Reinvent WP community

Ask questions, share implementation issues, and help shape the next Text to Speech examples.

TelegramDiscord

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.