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.

Readmore and generate plugin config visually

This package wraps the full Reinvent WP player UI and behavior.

Install

npm install @reinventwp/text-to-speech

Peer dependencies:

• react >= 18
• react-dom >= 18

Quick start

This component is client-side only. In Next.js, use it from a "use client" component.

"use client";

import { useMemo, useRef } from "react";
import ReinventTTS, {
  type ResolveAudioUrl,
  type WebPluginData,
} from "@reinventwp/text-to-speech";

export default function ArticlePage() {
  const articleRef = useRef<HTMLElement | null>(null);

  const pluginConfig = useMemo<Partial<WebPluginData>>(
    () => ({
      audio_source: "browser",
      read_title: true,
      read_subtitle: true,
      audio_config: {
        browser: {
          lang: "en-US",
          rate: 1,
          pitch: 1,
        },
      },
    }),
    [],
  );

  const resolveAudioUrl = useMemo<ResolveAudioUrl>(
    () =>
      async ({ text, signal }) => {
        const response = await fetch("example.com/api/tts", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            text,
            postId: "file_based_validation",
            preset: "file_based_validation",
            useCache: true,
          }),
          signal,
        });

        const data = await response.json();

        if (!response.ok || !data.status || !data.data) {
          throw new Error(data.message || "Unable to generate audio.");
        }

        return data.data;
      },
    [],
  );

  return (
    <>
      <ReinventTTS
        publicKey="rwp_public_xxx"
        target={articleRef}
        pluginConfig={pluginConfig}
        resolveAudioUrl={resolveAudioUrl}
      />

      <article ref={articleRef}>
        <h1>Article title</h1>
        <p>Your article content goes here.</p>
      </article>
    </>
  );
}

Notes

• This package is designed for browser environments.
• In Next.js, import it with ssr: false or render it from a client component.
• The package publishes compiled dist output only. Private source code is not included in the npm package.

Need help?

[email protected]