useSpeechSynthesis

Installation

npm install @1hook/use-speech-synthesis

Usage

import { useSpeechSynthesis } from '@1hook/use-speech-synthesis'

Basic text-to-speech:

const { speak } = useSpeechSynthesis()

speak('Hello, world!')

Configure speech options:

const { speak } = useSpeechSynthesis({
  lang: 'fr-FR',
  pitch: 1.5,
  rate: 0.8,
  volume: 0.7,
})

speak('Bonjour le monde!')

Cancel speaking and check the current state:

const { speak, cancel, state } = useSpeechSynthesis()

console.log(state) // state === 'idle'
speak('Hello, world!')
console.log(state) // state === 'speaking'
cancel()
console.log(state) // state === 'idle'

API Reference

UseSpeechSynthesisOptions

The options for the useSpeechSynthesis hook. See MDN docs for more details.

Prop	Type	Default
`volume?`	`number`	-
`pitch?`	`number`	-
`rate?`	`number`	-
`voice?`	`SpeechSynthesisVoice \| null`	-
`lang?`	`string`	-

UseSpeechSynthesisReturn

The return value of the useSpeechSynthesis hook.

Prop	Type	Default
`cancel`	`() => void`	-
`speak`	`(text: string) => void`	-
`error`	`SpeechSynthesisErrorEvent \| null`	-
`state`	`"idle" \| "speaking" \| "error"`	-
`utterance`	`SpeechSynthesisUtterance \| null`	-