HTML5 SpeechRecognition for Alpine

alpine-speech.js

export default function (Alpine) {
    const recognizer = new window.SpeechRecognition()
    recognizer.lang = navigator.language
    recognizer.continuous = false
    recognizer.interimResults = true

    Alpine.store('speechRecognizer', {
        state: 'stopped',
        error: null,
        api: recognizer
    })

    Alpine.directive('speech-recognition', (el, { expression }, { evaluate }) => {
        data().api.onstart = (event) => {
            setState('running')
        }
        data().api.onend = (event) => {
            setState('stopped')
        }
        data().api.onerror = (event) => {
            data().error = event.message
            setState('stopped')
        }
        data().api.onresult = (event) => {
            evaluate(`${expression} = '${event.results[0][0].transcript}'`)
        }
    })

    Alpine.magic('speechRecognition', (el, { Alpine }) => {
        return {
            start() {
                setState('starting')
                data().api.start()
            },
            stop() {
                setState('stopping')
                data().api.stop()
            },
            abort() {
                setState('aborting')
                data().api.abort()
            },
            toggle() {
                if (getState() == 'stopped') {
                    this.start()
                } else if (getState() == 'running') {
                    this.stop()
                } else {
                    this.abort()
                }
            },
            available() {
                return ('SpeechRecognition' in window)
            }
        }
    })

    function data() {
        return Alpine.store('speechRecognizer')
    }

    function getState() {
        return data().state
    }

    function setState(value) {
        data().state = value
    }
}

window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition