useSpeechSynthesis

Hook that provides speech synthesis functionality

browser

low

test coverage

Last changed: 2 months ago

TIP

This hook uses SpeechSynthesis browser api to provide enhanced functionality. Make sure to check for compatibility with different browsers when using this api

Installation

Library

CLI

Manual

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

Usage

const { supported, playing, status, utterance, error, stop, toggle, speak, resume, pause } = useSpeechSynthesis();

Demo

source

Api

Returns

UseSpeechSynthesisReturn

Type declaration

export type UseSpeechSynthesisStatus = 'end' | 'init' | 'pause' | 'play';

export interface UseSpeechSynthesisOptions {
  /** Language for SpeechSynthesis */
  lang?: string;
  /** Gets and sets the pitch at which the utterance will be spoken at. */
  pitch?: number;
  /** Gets and sets the speed at which the utterance will be spoken at. */
  rate?: number;
  /** The text to be spoken */
  text?: string;
  /** Gets and sets the voice that will be used to speak the utterance. */
  voice?: SpeechSynthesisVoice | null;
  /** Gets and sets the volume that the utterance will be spoken at. */
  volume?: number;
}

export interface UseSpeechSynthesisReturn {
  /** Any error that occurred during speech synthesis. */
  error: SpeechSynthesisErrorEvent | undefined;
  /** Indicates if speech is currently playing. */
  playing: boolean;
  /** The current status of speech synthesis. */
  status: UseSpeechSynthesisStatus;
  /** Indicates if the SpeechSynthesis API is supported in the current environment. */
  supported: boolean;
  /** The SpeechSynthesisUtterance instance. */
  utterance: SpeechSynthesisUtterance | undefined;
  /** Function to pause speech synthesis. */
  pause: () => void;
  /** Function to resume speech synthesis. */
  resume: () => void;
  /** Function to start speech synthesis. */
  speak: () => void;
  /** Function to stop speech synthesis. */
  stop: () => void;
  /** Function to toggle between play and pause. */
  toggle: (value?: boolean) => void;
}

Source

Source • Demo

Contributors

D

debabin