/reactuse

useSpeechSynthesis

Turns text into spoken output while keeping playback status, errors, and pause/resume controls in React state.

Usage

import { useSpeechSynthesis } from "@siberiacancode/reactuse";

const speech = useSpeechSynthesis();

Example

import { useSpeechSynthesis } from "@siberiacancode/reactuse";

export const Reader = () => {
  const speech = useSpeechSynthesis({ text: "Hello from Reactuse" });

  if (!speech.supported) return <div>Not supported</div>;

  return (
    <button onClick={() => speech.speak()}>
      {speech.playing ? "Speaking..." : "Speak"}
    </button>
  );
};

text:

const speech = useSpeechSynthesis({ text: "Hello" });

lang:

const speech = useSpeechSynthesis({ lang: "en-US" });

pitch:

const speech = useSpeechSynthesis({ pitch: 1.5 });

rate:

const speech = useSpeechSynthesis({ rate: 0.8 });

voice:

const speech = useSpeechSynthesis({ voice });

volume:

const speech = useSpeechSynthesis({ volume: 0.6 });

speak(text):

const speech = useSpeechSynthesis();
speech.speak("Read this sentence");

Notes

• Hook uses the SpeechSynthesis API.

Type Declarations

export type UseSpeechSynthesisStatus = "end" | "init" | "pause" | "play";
export interface UseSpeechSynthesisOptions {
  lang?: string;
  pitch?: number;
  rate?: number;
  text?: string;
  voice?: SpeechSynthesisVoice | null;
  volume?: number;
}
export interface UseSpeechSynthesisReturn {
  error: SpeechSynthesisErrorEvent | undefined;
  playing: boolean;
  status: UseSpeechSynthesisStatus;
  supported: boolean;
  utterance: SpeechSynthesisUtterance | undefined;
  pause: () => void;
  resume: () => void;
  speak: (text?: string) => void;
  stop: () => void;
  toggle: (value?: boolean) => void;
}
export declare const useSpeechSynthesis: (
  options?: UseSpeechSynthesisOptions
) => UseSpeechSynthesisReturn;