Skip to content
On this page

useSpeechRecognition

Category
Last Changed
3 months ago

Reactive SpeechRecognition.

Can I use?

Demo

Your browser does not support SpeechRecognition API, more details

Usage

import { useSpeechRecognition } from '@vueuse/core'

const {
  isSupported,
  isListening,
  isFinal,
  result,
  start,
  stop
} = useSpeechRecognition()
import { useSpeechRecognition } from '@vueuse/core'

const {
  isSupported,
  isListening,
  isFinal,
  result,
  start,
  stop
} = useSpeechRecognition()

Options

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

{
  lang: 'en-US',
  interimResults: true,
  continuous: true,
}
{
  lang: 'en-US',
  interimResults: true,
  continuous: true,
}

Type Declarations

Show Type Declarations
export interface SpeechRecognitionOptions extends ConfigurableWindow {
  /**
   * Controls whether continuous results are returned for each recognition, or only a single result.
   *
   * @default true
   */
  continuous?: boolean
  /**
   * Controls whether interim results should be returned (true) or not (false.) Interim results are results that are not yet final
   *
   * @default true
   */
  interimResults?: boolean
  /**
   * Langauge for SpeechRecognition
   *
   * @default 'en-US'
   */
  lang?: MaybeRef<string>
}
/**
 * Reactive SpeechRecognition.
 *
 * @see https://vueuse.org/useSpeechRecognition
 * @see https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition SpeechRecognition
 * @param options
 */
export declare function useSpeechRecognition(
  options?: SpeechRecognitionOptions
): {
  isSupported: boolean
  isListening: Ref<boolean>
  isFinal: Ref<boolean>
  recognition: SpeechRecognition | undefined
  result: Ref<string>
  error: Ref<SpeechRecognitionErrorEvent | undefined>
  toggle: (value?: boolean) => void
  start: () => void
  stop: () => void
}
export declare type UseSpeechRecognitionReturn = ReturnType<
  typeof useSpeechRecognition
>
export interface SpeechRecognitionOptions extends ConfigurableWindow {
  /**
   * Controls whether continuous results are returned for each recognition, or only a single result.
   *
   * @default true
   */
  continuous?: boolean
  /**
   * Controls whether interim results should be returned (true) or not (false.) Interim results are results that are not yet final
   *
   * @default true
   */
  interimResults?: boolean
  /**
   * Langauge for SpeechRecognition
   *
   * @default 'en-US'
   */
  lang?: MaybeRef<string>
}
/**
 * Reactive SpeechRecognition.
 *
 * @see https://vueuse.org/useSpeechRecognition
 * @see https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition SpeechRecognition
 * @param options
 */
export declare function useSpeechRecognition(
  options?: SpeechRecognitionOptions
): {
  isSupported: boolean
  isListening: Ref<boolean>
  isFinal: Ref<boolean>
  recognition: SpeechRecognition | undefined
  result: Ref<string>
  error: Ref<SpeechRecognitionErrorEvent | undefined>
  toggle: (value?: boolean) => void
  start: () => void
  stop: () => void
}
export declare type UseSpeechRecognitionReturn = ReturnType<
  typeof useSpeechRecognition
>

Source

SourceDemoDocs

Contributors

Anthony Fu
wheat
Joe Maylor
Shinigami
Alex Kozack
EGGSY
Antério Vieira

Changelog

v6.4.0 on 9/17/2021
ec310 - fix: reactive speech language (#741)
v6.1.0 on 9/2/2021
dee2f - fix: support TypeScript 4.4
v6.0.0-beta.2 on 8/9/2021
ff21b - feat: use tryOnScopeDispose instead of tryOnUnmounted
v4.11.2 on 5/30/2021
68c7d - feat(typedef): add return typedefs (#543) (#544)
useSpeechRecognition has loaded