useSpeechSynthesis

Reactive wrapper around the SpeechSynthesis API. Provides speak/stop/toggle controls with real-time status tracking.

Demo

Speech Synthesis

Not Supported

Text-to-speech via the SpeechSynthesis API. Click Speak to hear the text.

Status: init

Speak

Usage

Hook

import { useSpeechSynthesis } from "@usels/web";

function TextToSpeech() {
  const { isSupported$, isPlaying$, status$, speak, stop } = useSpeechSynthesis("Hello world");

  return (
    <div>
      <p>Supported: {isSupported$.get() ? "Yes" : "No"}</p>
      <p>Status: {status$.get()}</p>
      <button onClick={() => speak()}>Speak</button>
      <button onClick={() => stop()}>Stop</button>
    </div>
  );
}

Scope

import { createSpeechSynthesis } from "@usels/web";

function TextToSpeech() {
  "use scope";
  const { isSupported$, isPlaying$, status$, speak, stop } =
    createSpeechSynthesis("Hello world");

  return (
    <div>
      <p>Supported: {isSupported$.get() ? "Yes" : "No"}</p>
      <p>Status: {status$.get()}</p>
      <button onClick={() => speak()}>Speak</button>
      <button onClick={() => stop()}>Stop</button>
    </div>
  );
}

With voice options

// @noErrors
import { useSpeechSynthesis } from "@usels/web";

function CustomVoice() {
  const { speak, stop, isPlaying$ } = useSpeechSynthesis("안녕하세요", {
    lang: "ko-KR",
    pitch: 1.2,
    rate: 0.9,
  });

  return (
    <button onClick={() => (isPlaying$.get() ? stop() : speak())}>
      {isPlaying$.get() ? "Stop" : "Speak"}
    </button>
  );
}

Reactive text and options

The text parameter accepts MaybeObservable<string>, and options accept DeepMaybeObservable. Changes take effect on the next speak() call.

// @noErrors
import { observable, useObservable } from "@usels/core";
import { useSpeechSynthesis } from "@usels/web";

function DynamicSpeech() {
  const text$ = useObservable("Hello world");
  const rate$ = observable(1);

  const { speak } = useSpeechSynthesis(text$, { rate: rate$ });

  return (
    <div>
      <input value={text$.get()} onChange={(e) => text$.set(e.target.value)} />
      <button onClick={() => speak()}>Speak</button>
    </div>
  );
}

Notes

text is MaybeObservable<string>. Pass a plain string or an Observable<string>. The latest value is read at each speak() call.

options is DeepMaybeObservable. Each option field can be a plain value or an Observable. All options are read at each speak() call time. The voice option uses opaque wrapping to prevent Legend-State from deep-proxying the DOM object.

Type

Parameters

Parameter	Type	Description
text	MaybeObservable<string>	-
options	UseSpeechSynthesisOptions (optional)	-

UseSpeechSynthesisOptions

Option	Type	Default	Description
lang	string	-	Language for synthesis. Default: “en-US”
pitch	number	-	Pitch (0-2). Default: 1
rate	number	-	Rate (0.1-10). Default: 1
volume	number	-	Volume (0-1). Default: 1
voice	SpeechSynthesisVoice	-	Voice to use
window	WindowSource	-	-

Returns

UseSpeechSynthesisReturn

Name	Type	Description
isPlaying$	ReadonlyObservable<boolean>	Whether speech is currently playing
status$	ReadonlyObservable<UseSpeechSynthesisStatus>	Current status
error$	ReadonlyObservable<UseSpeechSynthesisErrorData | undefined>	Speech error
speak	() => void	Start speaking the text
stop	() => void	Stop speaking
toggle	(value?: boolean | undefined) => void	Toggle speaking
isSupported$	ReadonlyObservable<boolean>	-

Source

View on GitHub