useSpeechSynthesis

Category

Sensors

Export Size

721 B

Last Changed

5 days ago

Reactive SpeechSynthesis

Demo

Usage

import { useSpeechSynthesis } from '@reause/core'

const {
  isSupported,
  isPlaying,
  status,
  utterance,
  error,
  stop,
  toggle,
  speak,
} = useSpeechSynthesis('Hello world')
// speak() — cancels the previous speech, then speaks with the current text/options

Options

The following shows the default values of the options, they will be directly passed to SpeechSynthesis API.

import { useSpeechSynthesis } from '@reause/core'

useSpeechSynthesis('Hello world', {
  lang: 'en-US',
  pitch: 1,
  rate: 1,
  volume: 1,
})

Type Declarations

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

export interface UseSpeechSynthesisOptions extends ConfigurableWindow {
    lang?: string;
    pitch?: number;
    rate?: number;
    voice?: SpeechSynthesisVoice;
    volume?: number;
    onBoundary?: (event: SpeechSynthesisEvent) => void;
}

export interface UseSpeechSynthesisReturn {
    isSupported: boolean;
    isPlaying: boolean;
    status: UseSpeechSynthesisStatus;
    utterance: SpeechSynthesisUtterance | undefined;
    error: SpeechSynthesisErrorEvent | undefined;
    stop: () => void;
    toggle: (value?: boolean) => void;
    speak: () => void;
}

export function useSpeechSynthesis(text?: string, options?: UseSpeechSynthesisOptions): UseSpeechSynthesisReturn

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

e608a - feat(ci): align CI, packaging and release with VueUse

57ebb - fix(core): resolve useSpeechSynthesis audit findings (#642)