vue-web-speech

vue-web-speech

Vue wrapper for Web Speech API for voice recognition.
Package contains two components <vue-web-speech> for voice recognition and <vue-web-speech-synth> for voice synthesis.
Web Speech API is in experimental phase, check browser compatibility before using in production.

Installation

npm i vue-web-speech

Demo

Usage

Inject plugin to your vue instance by Vue.use

import Vue from 'vue'
import VueWebSpeech from 'vue-web-speech'

...

Vue.use(VueWebSpeech)

Then use it as component

<template>
    <vue-web-speech
      v-model="record"
      @results="onResults"
    />
    <vue-web-speech-synth
      v-model="play"
    />
</template>

Documentation for <vue-web-speech>

Properties

Prop	Type	Default	Descrtiption
v-model	Boolean	false	Used to bind recording state. Can be used to start recording (true) or stop recording (false).
lang	String	Defaults to the HTML lang attribute value, or the user agent's language setting if that isn't set either.	Language to recognize speech.
confidenceLimit	String | Number	0.8	Limit for confidence under which transcription will be filtered out.
continuous	Boolean	false	Controls whether continuous results are returned for each recognition, or only a single result.
interimResults	Boolean	false	Controls whether interim (not final) results should be returned.
maxAlternatives	String | Number	1	Sets the maximum number of alternatives provided per result.
grammar	String	null	Grammars that will be understood by the recognition.

Slots

Slot	Props	Descrtiption
input	String text	You can use this slot as visualization of speech result array. text is string of made of joined arrays by \n.

Example of input slot

<vue-web-speech>
    <template v-slot:input="{text}">
        <textarea :value="text" />
    </template>
</vue-web-speech>

Events

Event	Returns	Descrtiption
results	Array	Returns array of transcripts filtered by confidenceLimit.
resultsRaw	SpeechRecognitionResultList	Returns raw SpeechRecognitionResultList on onResult event without confidenceLimit filtering.
unrecognized	null	Fires when confidenceLimit was not satisfied. When continuous prop is on, fires when no result satisfied confidenceLimit.
error	Event	Fires native onerror event.
start	Event	Fires native onstart event.
end	Event	Fires native onend event.
speechstart	Event	Fires native onspeechstart event.
speechend	Event	Fires native onspeechend event.
audiostart	Event	Fires native onaudiostart event.
audioend	Event	Fires native onaudioend event.
soundstart	Event	Fires native onsoundstart event.
soundend	Event	Fires native onsoundend event.
nomatch	Event	Fires native onnomatch event.

Documentation for <vue-web-speech-synth>

Properties

Prop	Type	Default	Descrtiption
v-model	Boolean	false	Used to bind playing state. Can be used to start speaking (true) or stop speaking (false).
voice	SpeechSynthesisVoice	Default system voice.	Voice to use for voice synthesis. Get in the @list-voices event
text	String	null	Text to be synthesised.
rate	String | Number	1	Speed at which the utterance will be spoken at.
pitch	String | Number	1	Pitch at which the utterance will be spoken at.

Events

Event	Returns	Descrtiption
list-voices	Array of SpeechSynthesisVoice	Returns array of available SpeechSynthesisVoice supported by system.
error	Event	Fires native onerror event.
end	Event	Fires native onend event.
boundary	Event	Fires native onboundary event.