vue-webapi-speech-recognition
Microphone icon as a single component (black as default and red when it's recording) to interact with the Web Speech Recognition Api.
Install Vue
npm install vue-webapi-speech-recognitionimport Vue from 'vue'
import App from './App.vue'
import SpeechRecognition from 'vue-webapi-speech-recognition'
Vue.use(SpeechRecognition)
new Vue({ render: h => h(App) }).$mount('#app')Usage
<template>
<SpeechRecognition lang="en-EN" :white="false" @end="speechEnd" class="icon"/>
</template>
<script>
export default {
methods: {
speechEnd({transcriptions}) {
console.log(transcriptions)
}
}
}
</script>
<style scoped>
.icon {
width: 64px;
height: 64px;
}
</style>