React Tools

Appearance

useSpeechSynthesis ​

Hook to use SpeechSynthesis API.

See: Web Speech API.

Demo ​

INFO

The component use useSpeechSynthesis hook to read a text from an input text. Other fields are renders to setting properties as voice rate and pitch of SpeechRecognition.

Loading demo…
Show source code
tsx
import { useState } from "react";
import { LanguageBCP47Tags, useSpeechSynthesis } from "../../../.."

export const UseSpeechSynthesis = () => {
	const { state, speak, pause, resume, cancel } = useSpeechSynthesis({
		onError(ev) {
			console.log(ev)
		},
	});
	const [form, setForm] = useState<{ text: string, volume: string, voice: string, lang: string, rate: string, pitch: string }>({ text: "", volume: "0.1", voice: "", lang: "", rate: "1", pitch: "1" });

	if (!state.isSupported) {
		return <div style={{ display: "flex", justifyContent: "center" }}>
			<p>Speech Synthesis not supported</p>
		</div>
	}

	return <div style={{ display: "flex", flexDirection: "column", gap: 10, justifyContent: "center", width: 'fit-content' }}>
		<div>
			<label htmlFor="text">Text to speak</label>
			<input type="text" value={form.text} onChange={e => setForm(f => ({...f, text: e.target.value}))} id="text" name="text"/>
		</div>
		<div>
			<label htmlFor="text">Voices</label>
			<select value={form.voice} onChange={e => setForm(f => ({ ...f, voice: e.target.value }))} disabled={state.status === "speaking"}>
				<>
					{
						(state.voices || []).map(el => (
							<option key={el.name} value={el.name}>{ `${el.name} - ${el.lang}${el.default ? ' - DEFAULT' : ''}` }</option>
						))
					}
				</>
			</select>
		</div>
		<div>
			<label htmlFor="text">Voices</label>
			<select value={form.lang} onChange={e => setForm(f => ({ ...f, lang: e.target.value }))} disabled={state.status === "speaking"}>
				<>
					{
						["en-US", "it-IT", "en-GB", "de-DE", "es-ES", "fr-FR"].map(el => (
							<option key={el} value={el}>{`${el}`}</option>
						))
					}
				</>
			</select>
		</div>
		<div>
			<label htmlFor="volume">Volume</label>
			<input type="range" id="volume" name="volume" min="0" max="1" step="0.1" value={form.volume} onChange={e => setForm(f => ({...f, volume: e.target.value}))} disabled={state.status === "speaking"}/>
		</div>
		<div>
			<label htmlFor="range">Rate</label>
			<input type="range" id="range" name="range" min="0.1" max="10" step="0.1" value={form.rate} onChange={e => setForm(f => ({...f, rate: e.target.value}))} disabled={state.status === "speaking"}/>
		</div>
		<div>
			<label htmlFor="pitch">Pitch</label>
			<input type="range" id="pitch" name="pitch" value={form.pitch} min="0" max="2" step="0.1" onChange={e => setForm(f => ({ ...f, pitch: e.target.value }))} disabled={state.status === "speaking"}/>
		</div>
		<div style={{ display: "flex", gap: 10 }}>
			<button
				type="button"
				onClick={() => {
					speak({
						text: form.text,
						lang: form.lang as LanguageBCP47Tags,
						voice: (state.voices || []).filter(v => v.name === form.voice)[0],
						volume: Number(form.volume),
						rate: Number(form.rate),
						pitch: Number(form.pitch),
					})
				}}
				disabled={state.status === "paused"}
			>
				Speak
			</button>
			<button
				type="button"
				onClick={() => {
					speak({
						text: form.text,
						lang: form.lang as LanguageBCP47Tags,
						voice: (state.voices || []).filter(v => v.name === form.voice)[0],
						volume: Number(form.volume),
						rate: Number(form.rate),
						pitch: Number(form.pitch),
						startImmediatly: true
					})
				}}
			>
				Speak immediatly
			</button>
			<button
				type="button"
				onClick={() => {
					state.status === "paused" ? resume() : pause();
				}}
				disabled={!["speaking", "paused"].includes(state.status)}
			>
				{state.status === "paused" ? "Resume" : "Pause"}
			</button>
			<button
				type="button"
				onClick={cancel}
				disabled={state.status === "end"}
			>
				Cancel
			</button>
		</div>
	</div>
}

Types ​

SpeechSynthesisonCancel ​

ts
export type SpeechSynthesisonCancel = ((this: SpeechSynthesisUtterance, ev: {
	/**[MDN Reference](https://developer.mozilla.org/docs/Web/API/SpeechSynthesisEvent/charIndex).*/
	readonly charIndex: number;
	/**[MDN Reference](https://developer.mozilla.org/docs/Web/API/SpeechSynthesisEvent/charLength).*/
	readonly charLength: number;
	/**[MDN Reference](https://developer.mozilla.org/docs/Web/API/SpeechSynthesisEvent/elapsedTime).*/
	readonly elapsedTime: number;
	/**[MDN Reference](https://developer.mozilla.org/docs/Web/API/SpeechSynthesisEvent/name).*/
	readonly name: string;
	/**[MDN Reference](https://developer.mozilla.org/docs/Web/API/SpeechSynthesisEvent/utterance).*/
	readonly utterance: SpeechSynthesisUtterance;
}) => void) | null;

UseSpeechSynthesisProps ​

Props accepted by useSpeechSynthesis.

PropertyTypeRequiredDescription
onSpeak() => voidfunction that will be executed when speak method of SpeechSynthesis will be invoked.
onStartSpeechSynthesisUtterance["onstart"]MDN Reference.
onPauseSpeechSynthesisUtterance["onpause"]MDN Reference.
onResumeSpeechSynthesisUtterance["onresume"]MDN Reference.
onBoundarySpeechSynthesisUtterance["onboundary"]MDN Reference.
onMarkSpeechSynthesisUtterance["onmark"]MDN Reference.
onErrorSpeechSynthesisUtterance["onerror"]MDN Reference.
onEndSpeechSynthesisUtterance["onend"]MDN Reference.
onCancelSpeechSynthesisonCancel
langLanguageBCP47TagsMDN Reference.
pitchSpeechSynthesisUtterance["pitch"]MDN Reference.
rateSpeechSynthesisUtterance["rate"]MDN Reference.
voiceSpeechSynthesisUtterance["voice"]MDN Reference.
volumeSpeechSynthesisUtterance["volume"]MDN Reference.

SpeechSynthesisSpeakParam ​

ts
export type SpeechSynthesisSpeakParam = SpeechSynthesisUtterance["text"] | ({
	/**[MDN Reference](https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance/text).*/
	text: SpeechSynthesisUtterance["text"];
	/**boolean that if true invokes __speak__ method of _SpeechSynthesis_ cancelling currenty speaking.*/
	startImmediatly?: boolean;
	/**[MDN Reference](https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance/start_event).*/
	onStart?: SpeechSynthesisUtterance["onstart"];
	/**[MDN Reference](https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance/pause_event).*/
	onPause?: SpeechSynthesisUtterance["onpause"];
	/**[MDN Reference](https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance/resume_event).*/
	onResume?: SpeechSynthesisUtterance["onresume"];
	/**[MDN Reference](https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance/boundary_event).*/
	onBoundary?: SpeechSynthesisUtterance["onboundary"];
	/**[MDN Reference](https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance/mark_event).*/
	onMark?: SpeechSynthesisUtterance["onmark"];
	/**[MDN Reference](https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance/error_event).*/
	onError?: SpeechSynthesisUtterance["onerror"];
	/**[MDN Reference](https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance/end_event).*/
	onEnd?: SpeechSynthesisUtterance["onend"];
	onCancel?: SpeechSynthesisonCancel;
	/**[MDN Reference](https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance/lang).*/
	lang?: LanguageBCP47Tags;
	/**[MDN Reference](https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance/pitch).*/
	pitch?: SpeechSynthesisUtterance["pitch"];
	/**[MDN Reference](https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance/rate).*/
	rate?: SpeechSynthesisUtterance["rate"];
	/**[MDN Reference](https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance/voice).*/
	voice?: SpeechSynthesisUtterance["voice"];
	/**[MDN Reference](https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance/volume).*/
	volume?: SpeechSynthesisUtterance["volume"];
});

UseSpeechSynthesis ​

Declaration of useSpeechSynthesis.

InputInput DescriptionReturnReturn Description
(props?: UseSpeechSynthesisProps): { state: { isSupported: boolean; status: "ready" | "speaking" | "paused" | "error" | "end" | "unavailable"; hasPending: boolean; voices: SpeechSynthesisVoice[] | null; }, speakDeclaration of useSpeechSynthesis.(param: SpeechSynthesisSpeakParam) => void; pause: () => void; resume: () => void; cancel: () => void; }

Released under the MIT License.

Copyright © 2024-present nDriaDev