use-speech-synthesis

Speak text with the Web Speech API.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/composable

Import the entry directly. Call lifecycle-bound utilities inside <script setup> so cleanup follows the component scope; consult the runtime contract for this entry's SSR and hydration behavior.

import { useSpeechSynthesis } from "@vizejs/composable/use-speech-synthesis";

Try it

Read an announcement aloud

Speak text with the system voice and control playback.

Open the interactive example

What to observe: Read aloud speaks the announcement; Stop cancels it. The status shows whether speech is playing.

voices lists the installed voices; lang, rate and pitch can be refs. Every example renders a neutral message until it mounts, so server and client markup match, and then explains what to do when the browser lacks the API.

Compare the initial and interacted states

Copy the example

Save this complete SFC in your Vue project. Its public imports and source are the same ones executed in the preview.

<script setup lang="ts">
import { ref } from "vue";
import { useMounted } from "@vizejs/composable/use-mounted";
import { useSpeechSynthesis } from "@vizejs/composable/use-speech-synthesis";

const mounted = useMounted();
const text = ref("Welcome to Vue Fes Japan.");
const { supported, status, speak, cancel } = useSpeechSynthesis(text, { lang: "en-US", rate: 1 });
</script>

<template>
  <div class="composable-example">
    <p>Read an announcement aloud with the system voice.</p>
    <label>
      Announcement
      <input v-model="text" />
    </label>
    <div class="example-actions">
      <button type="button" :disabled="!mounted || !supported" @click="() => speak()">
        Read aloud
      </button>
      <button type="button" :disabled="!mounted || !supported" @click="() => cancel()">Stop</button>
    </div>
    <output aria-live="polite">{{
      !mounted
        ? "Checking browser support…"
        : supported
          ? `Speech: ${status}`
          : "Speech synthesis is not available in this browser."
    }}</output>
  </div>
</template>

Runtime contract

API

useSpeechSynthesis

Speak text with the Web Speech API. Each speak creates a fresh utterance from the current reactive text, language, voice, pitch, rate, and volume (validated ranges), and cancels speech previously started by this composable. status follows the utterance lifecycle; interruptions caused by cancel return to "idle" instead of reporting an error. The available voices are kept current via voiceschanged. Speech started by this composable is cancelled and the listener removed when the owning reactive scope stops. Server rendering: nothing is spoken; supported is false, status is "idle", and voices is empty.

function useSpeechSynthesis( text: MaybeRefOrGetter<string>, options: UseSpeechSynthesisOptions = {}, ): SpeechSynthesisControls

const text = ref("Hello, Vize");
const { speak, status } = useSpeechSynthesis(text, { rate: 1.2 });
speak();

Types

SpeechSynthesisVoiceLike

Minimal SpeechSynthesisVoice.

SpeechSynthesisUtteranceLike

Minimal SpeechSynthesisUtterance.

SpeechSynthesisLike

Minimal speechSynthesis controller.

SpeechSynthesisHost

Capabilities used by useSpeechSynthesis.

UseSpeechSynthesisOptions

Options for useSpeechSynthesis.

SpeechSynthesisControls

Reactive state and actions returned by useSpeechSynthesis.