Reinvent WP
Blog

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
Try the code generator

Give every reader another way to follow your story. Keep each word in focus.

Try it free. Pay when you're ready.

Get 40,000 hosted characters for 14 days. No credit card required.

Enter your website domain.

Simple pricing. Focus on your site grow

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

Individual

1 site

$6

per month

Perfect for personal websites and solo projects.

Professional

5 sites

Most chosen

$20

per month

Ideal for freelancers and solo entrepreneurs managing multiple sites.

Company

20 sites

$120

per month

Best for agencies and businesses handling multiple client websites.

All Pro features included

40,000 cloud characters per month included

Use your own TTS provider API key anytime

Pricing notes

Plugin license

The price listed above is only for the JavaScript library 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.

Why add audio to your website?

Give every visitor a simple choice: read your content or listen to it.

One story, different readers

Reach more people

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 guidance
A brief visit

Boost dwell time and SEO

Visitors 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 story
Start listening

Let them listen anywhere

People 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 report
A visitor is about to leave

Reduce bounce rate

Visitors 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 story

Just add a js script, and it works

Add a listening experience that fits your content, your platform, and your preferred voice provider.

Paste one script tag

Works on any website

Use it on static sites, a custom CMS, Shopify, Joomla, PHP, or Laravel. All you need is a page that can load a script.
One article

Your choice of audio

Connect to industry leading text to speech providers, or start with browser speech.
OpenAI
OpenAI

Any provider

Press play

Reader-friendly playback

Read the article aloud, follow the page, and highlight sentences and words as they are spoken.
Pick your settings

Configure without guesswork

Choose your settings in the config editor, preview the player, and copy a JavaScript snippet for your website.

Hear the voices

Try it free. Pay when you're ready.

Get 40,000 hosted characters for 14 days. No credit card required.

Enter your website domain.

From script to speech.

A minimal setup using browser speech and a public site key. Point the player at your article to get started.

  1. Choose how to start

    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.

  2. Copy your public site key

    Finish creating your project in the Text to Speech dashboard, then copy its public site key.

  3. Connect your website

    Add the public site key and your allowed website domain to the snippet.

  4. Paste your snippet

    Set your public site key in the snippet, then paste it into your HTML.

Simple JS embed

HTML

<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>
Generate my code

Make the player yours.

Adjust the settings, preview the player, then switch to Code to copy your JavaScript embed.

Your player

Designing a calmer publishing workflow

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.

Try it free. Pay when you're ready.

Get 40,000 hosted characters for 14 days. No credit card required.

Enter your website domain.

Join our community.

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

Join TelegramJoin Discord

Need a custom solution?

Running a high-traffic website or planning an enterprise integration? We can help you fit the technology to your application.

Discuss your project

reinventwp@gmail.com

Contact us

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

0/2000 characters

By sending, you agree to share your email, website address, and message with Reinvent WP. Privacy Policy