stack/v1/packages/mosaic/framework/skills/vueuse-functions/references/useSpeechSynthesis.md

category

category
Sensors

useSpeechSynthesis

Reactive SpeechSynthesis.

Can I use?

Usage

import { useSpeechSynthesis } from '@vueuse/core';

const { isSupported, isPlaying, status, voiceInfo, utterance, error, stop, toggle, speak } =
  useSpeechSynthesis();

Options

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

import { useSpeechSynthesis } from '@vueuse/core';
// ---cut---
useSpeechSynthesis({
  lang: 'en-US',
  pitch: 1,
  rate: 1,
  volume: 1,
});

Type Declarations

export type UseSpeechSynthesisStatus = 'init' | 'play' | 'pause' | 'end';
export interface UseSpeechSynthesisOptions extends ConfigurableWindow {
  /**
   * Language for SpeechSynthesis
   *
   * @default 'en-US'
   */
  lang?: MaybeRefOrGetter<string>;
  /**
   * Gets and sets the pitch at which the utterance will be spoken at.
   *
   * @default 1
   */
  pitch?: MaybeRefOrGetter<SpeechSynthesisUtterance['pitch']>;
  /**
   * Gets and sets the speed at which the utterance will be spoken at.
   *
   * @default 1
   */
  rate?: MaybeRefOrGetter<SpeechSynthesisUtterance['rate']>;
  /**
   * Gets and sets the voice that will be used to speak the utterance.
   */
  voice?: MaybeRef<SpeechSynthesisVoice>;
  /**
   * Gets and sets the volume that the utterance will be spoken at.
   *
   * @default 1
   */
  volume?: MaybeRefOrGetter<SpeechSynthesisUtterance['volume']>;
  /**
   * Callback function that is called when the boundary event is triggered.
   */
  onBoundary?: (event: SpeechSynthesisEvent) => void;
}
/**
 * Reactive SpeechSynthesis.
 *
 * @see https://vueuse.org/useSpeechSynthesis
 * @see https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis SpeechSynthesis
 */
export declare function useSpeechSynthesis(
  text: MaybeRefOrGetter<string>,
  options?: UseSpeechSynthesisOptions,
): {
  isSupported: ComputedRef<boolean>;
  isPlaying: ShallowRef<boolean, boolean>;
  status: ShallowRef<UseSpeechSynthesisStatus, UseSpeechSynthesisStatus>;
  utterance: ComputedRef<SpeechSynthesisUtterance>;
  error: ShallowRef<SpeechSynthesisErrorEvent | undefined, SpeechSynthesisErrorEvent | undefined>;
  stop: () => void;
  toggle: (value?: boolean) => void;
  speak: () => void;
};
export type UseSpeechSynthesisReturn = ReturnType<typeof useSpeechSynthesis>;