⬅️ Back to Table of Contents

📄 useSpeechRecognition

📊 Analysis Summary

Metric	Count
🔧 Functions	4
📦 Imports	14
🟢 Vue Composition API	2
📐 Interfaces	2

📚 Table of Contents

• Imports
• Vue Composition API
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/useSpeechRecognition/index.ts

📦 Imports

Name	Source
MaybeRefOrGetter	vue
ShallowRef	vue
ConfigurableWindow	../_configurable
Supportable	../types
SpeechRecognition	./types
SpeechRecognitionErrorEvent	./types
toRef	@vueuse/shared
tryOnScopeDispose	@vueuse/shared
shallowReadonly	vue
shallowRef	vue
toValue	vue
watch	vue
defaultWindow	../_configurable
useSupported	../useSupported

---

Vue Composition API

Name	Type	Reactive Variables	Composables
watch	watch	none	none
watch	watch	none	none

---

Functions

useSpeechRecognition(options: UseSpeechRecognitionOptions): UseSpeechRecognitionReturn

Reactive SpeechRecognition.

Parameters:

• options any: No description

See: https://vueuse.org/useSpeechRecognition, https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition SpeechRecognition

Raw JSDoc

/**
 * Reactive SpeechRecognition.
 *
 * @see https://vueuse.org/useSpeechRecognition
 * @see https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition SpeechRecognition
 * @param options
 */

Calls:

• toRef (from @vueuse/shared)
• shallowRef (from vue)
• start
• stop
• useSupported (from ../useSupported)
• toValue (from vue)
• watch (from vue)
• recognition!.start
• recognition!.stop
• tryOnScopeDispose (from @vueuse/shared)
• shallowReadonly (from vue)

Code

export function useSpeechRecognition(options: UseSpeechRecognitionOptions = {}): UseSpeechRecognitionReturn {
  const {
    interimResults = true,
    continuous = true,
    maxAlternatives = 1,
    window = defaultWindow,
  } = options

  const lang = toRef(options.lang || 'en-US')
  const isListening = shallowRef(false)
  const isFinal = shallowRef(false)
  const result = shallowRef('')
  const confidence = shallowRef(0)
  const error = shallowRef<SpeechRecognitionErrorEvent | Error | undefined>(undefined)

  let recognition: SpeechRecognition | undefined

  const start = () => {
    isListening.value = true
  }

  const stop = () => {
    isListening.value = false
  }

  const toggle = (value = !isListening.value) => {
    if (value) {
      start()
    }
    else {
      stop()
    }
  }

  const SpeechRecognition = window && ((window as any).SpeechRecognition || (window as any).webkitSpeechRecognition)
  const isSupported = useSupported(() => SpeechRecognition)

  if (isSupported.value) {
    recognition = new SpeechRecognition() as SpeechRecognition

    recognition.continuous = continuous
    recognition.interimResults = interimResults
    recognition.lang = toValue(lang)
    recognition.maxAlternatives = maxAlternatives

    recognition.onstart = () => {
      isListening.value = true
      isFinal.value = false
    }

    watch(lang, (lang) => {
      if (recognition && !isListening.value)
        recognition.lang = lang
    })

    recognition.onresult = (event) => {
      const currentResult = event.results[event.resultIndex]
      const { transcript, confidence: alternativeConfidence } = currentResult[0]

      isFinal.value = currentResult.isFinal
      result.value = transcript
      confidence.value = alternativeConfidence
      error.value = undefined
    }

    recognition.onerror = (event) => {
      error.value = event
    }

    recognition.onend = () => {
      isListening.value = false
      recognition!.lang = toValue(lang)
    }

    watch(isListening, (newValue, oldValue) => {
      if (newValue === oldValue)
        return

      try {
        if (newValue) {
          recognition!.start()
        }
        else {
          recognition!.stop()
        }
      }
      catch (err) {
        error.value = err as unknown as Error
      }
    })
  }

  tryOnScopeDispose(() => {
    stop()
  })

  return {
    isSupported,
    isListening,
    isFinal: shallowReadonly(isFinal),
    recognition,
    result: shallowReadonly(result),
    confidence: shallowReadonly(confidence),
    error,

    toggle,
    start,
    stop,
  }
}

Internal helpers

Declared inside another function in this file.

start(): void

Returns: void

Code

() => {
    isListening.value = true
  }

stop(): void

Returns: void

Code

() => {
    isListening.value = false
  }

toggle(value: boolean): void

Parameters:

• value boolean

Returns: void

Calls:

• start
• stop

Code

(value = !isListening.value) => {
    if (value) {
      start()
    }
    else {
      stop()
    }
  }

---

Interfaces

UseSpeechRecognitionOptions

Interface Code

export interface UseSpeechRecognitionOptions 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
  /**
   * Language for SpeechRecognition
   *
   * @default 'en-US'
   */
  lang?: MaybeRefOrGetter<string>
  /**
   * A number representing the maximum returned alternatives for each result.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/maxAlternatives
   * @default 1
   */
  maxAlternatives?: number
}

Properties

Name	Type	Optional	Description
continuous	boolean	✓	not shown
interimResults	boolean	✓	not shown
lang	MaybeRefOrGetter<string>	✓	not shown
maxAlternatives	number	✓	not shown

UseSpeechRecognitionReturn

Interface Code

export interface UseSpeechRecognitionReturn extends Supportable {
  isListening: ShallowRef<boolean>
  isFinal: Readonly<ShallowRef<boolean>>
  recognition: SpeechRecognition | undefined
  result: Readonly<ShallowRef<string>>
  /**
   * Confidence value of the latest result, between 0 and 1.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognitionAlternative/confidence
   */
  confidence: Readonly<ShallowRef<number>>
  error: ShallowRef<SpeechRecognitionErrorEvent | Error | undefined>
  toggle: (value?: boolean) => void
  start: () => void
  stop: () => void
}

Properties

Name	Type	Optional	Description
isListening	ShallowRef<boolean>	✗	not shown
isFinal	Readonly<ShallowRef<boolean>>	✗	not shown
recognition	SpeechRecognition \| undefined	✗	not shown
result	Readonly<ShallowRef<string>>	✗	not shown
confidence	Readonly<ShallowRef<number>>	✗	not shown
error	ShallowRef<SpeechRecognitionErrorEvent \| Error \| undefined>	✗	not shown
toggle	(value?: boolean) => void	✗	not shown
start	() => void	✗	not shown
stop	() => void	✗	not shown

---

Generated by Syntax Scribe