Vue wrapper for Web Speech API for recognizing voice and speech synthesis
npm install vue-web-speechVue wrapper for Web Speech API for voice recognition.
Package contains two components
Web Speech API is in experimental phase, check browser compatibility before using in production.
npm i vue-web-speech
Demo
Usage
Inject plugin to your vue instance by Vue.use
javascript
import Vue from 'vue'
import VueWebSpeech from 'vue-web-speech'...
Vue.use(VueWebSpeech)
`Then use it as component
javascript
@results="onResults"
/>
/>
`Documentation for
$3
| Prop | Type | Default | Descrtiption |
|---|---|---|---|
| v-model | Boolean | false | Used to bind recording state. Can be used to start recording (
) 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
`javascript
`
---
$3
| 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
$3
| Prop | Type | Default | Descrtiption |
|---|---|---|---|
| v-model | Boolean | false | Used to bind playing state. Can be used to start speaking (
) 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. |
---
$3
| Event | Returns | Descrtiption |
|---|---|---|
| list-voices | Array of SpeechSynthesisVoice | Returns array of available SpeechSynthesisVoice` supported by system. |