1---
2category: Sensors
3---
4 
5# useSpeechSynthesis
6 
7Reactive [SpeechSynthesis](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis).
8 
9> [Can I use?](https://caniuse.com/mdn-api_speechsynthesis)
10 
11## Usage
12 
13```ts
14import { useSpeechSynthesis } from '@vueuse/core'
15 
16const {
17  isSupported,
18  isPlaying,
19  status,
20  voiceInfo,
21  utterance,
22  error,
23  stop,
24  toggle,
25  speak,
26} = useSpeechSynthesis()
27```
28 
29### Options
30 
31The following shows the default values of the options, they will be directly passed to [SpeechSynthesis API](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis).
32 
33```ts
34import { useSpeechSynthesis } from '@vueuse/core'
35// ---cut---
36useSpeechSynthesis({
37  lang: 'en-US',
38  pitch: 1,
39  rate: 1,
40  volume: 1,
41})
42```
43 
44## Type Declarations
45 
46```ts
47export type UseSpeechSynthesisStatus = "init" | "play" | "pause" | "end"
48export interface UseSpeechSynthesisOptions extends ConfigurableWindow {
49  /**
50   * Language for SpeechSynthesis
51   *
52   * @default 'en-US'
53   */
54  lang?: MaybeRefOrGetter<string>
55  /**
56   * Gets and sets the pitch at which the utterance will be spoken at.
57   *
58   * @default 1
59   */
60  pitch?: MaybeRefOrGetter<SpeechSynthesisUtterance["pitch"]>
61  /**
62   * Gets and sets the speed at which the utterance will be spoken at.
63   *
64   * @default 1
65   */
66  rate?: MaybeRefOrGetter<SpeechSynthesisUtterance["rate"]>
67  /**
68   * Gets and sets the voice that will be used to speak the utterance.
69   */
70  voice?: MaybeRef<SpeechSynthesisVoice>
71  /**
72   * Gets and sets the volume that the utterance will be spoken at.
73   *
74   * @default 1
75   */
76  volume?: MaybeRefOrGetter<SpeechSynthesisUtterance["volume"]>
77  /**
78   * Callback function that is called when the boundary event is triggered.
79   */
80  onBoundary?: (event: SpeechSynthesisEvent) => void
81}
82export interface UseSpeechSynthesisReturn extends Supportable {
83  isPlaying: ShallowRef<boolean>
84  status: ShallowRef<UseSpeechSynthesisStatus>
85  utterance: ComputedRef<SpeechSynthesisUtterance>
86  error: ShallowRef<SpeechSynthesisErrorEvent | undefined>
87  stop: () => void
88  toggle: (value?: boolean) => void
89  speak: () => void
90}
91/**
92 * Reactive SpeechSynthesis.
93 *
94 * @see https://vueuse.org/useSpeechSynthesis
95 * @see https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis SpeechSynthesis
96 */
97export declare function useSpeechSynthesis(
98  text: MaybeRefOrGetter<string>,
99  options?: UseSpeechSynthesisOptions,
100): UseSpeechSynthesisReturn
101```
102