Skip to content

Instantly share code, notes, and snippets.

@bhaidar
Created February 25, 2023 14:37
Show Gist options
  • Save bhaidar/2affc44d95a61f3103a4d9be1893cd10 to your computer and use it in GitHub Desktop.
Save bhaidar/2affc44d95a61f3103a4d9be1893cd10 to your computer and use it in GitHub Desktop.
Speech Recognition Composable for Vue and Composable API
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