Created
February 25, 2023 14:37
Speech Recognition Composable for Vue and Composable API
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { ref,watch,shallowRef,unref } from 'vue' | |
export function useSpeechRecognition({lang,continuous,interimResults}) { | |
const isListening = ref(false) | |
const isFinal = ref(false) | |
const result = ref('') | |
const error = shallowRef(undefined) | |
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition | |
// Checks if the browser supports the API | |
const isSupported = Boolean(SpeechRecognition) | |
// The speech recognition constructor | |
const recognition = SpeechRecognition? new SpeechRecognition() : false | |
const toggle = (value = isListening.value) => { | |
isListening.value = value | |
} | |
const start = () => { | |
isListening.value = true | |
} | |
const stop = () => { | |
isListening.value = false | |
} | |
if (isSupported) { | |
recognition.continuous = continuous | |
recognition.interimResults = interimResults | |
recognition.lang = unref(lang) | |
recognition.onstart = () => { | |
isFinal.value = false | |
} | |
recognition.onresult = (event) => { | |
// raw words that the user spoke | |
const transcript = Array.from(event.results) | |
.map((result) => { | |
isFinal.value = result.isFinal | |
return result[0] | |
}) | |
.map(result => result.transcript) | |
.join('') | |
result.value = transcript | |
error.value = undefined | |
} | |
recognition.onerror = (event) => { | |
error.value = 'Speech recognition error detected: ' + event.error | |
} | |
recognition.onend = () => { | |
isListening.value = false | |
} | |
watch(isListening, () => { | |
if (isListening.value) | |
// Starting the speech recognition | |
recognition.start() | |
else | |
// stopping the recognition | |
recognition.stop() | |
}) | |
} | |
return { | |
isSupported, | |
isListening, | |
isFinal, | |
recognition, | |
result, | |
error, | |
toggle, | |
start, | |
stop, | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment