音声認識

SpeechReco.vue

<template>
  <h1>音声認識</h1>
  <p>{{confidence.toFixed(2)}} - {{transcript}}</p>
  <ol>
    <li v-for="script,i in scripts" :key="i">
      {{script}}
    </li>
  </ol>
</template>

<script lang="ts">
import {defineComponent} from 'vue'

export default defineComponent({
  data() {
    return {
      scripts: [] as string[],
      transcript: '' as string,
      confidence: 0
    }
  },
  methods: {
    setupSpeechRecognition() {
      const recognition = new webkitSpeechRecognition();
      recognition.continuous = true;
      recognition.lang = 'ja';
      recognition.interimResults = true;
      recognition.maxAlternatives = 1;
      recognition.start();
      // 結果の受け取りとハンドリング
      recognition.onresult = (event) => {
        this.transcript = event.results[0][0].transcript;
        this.confidence = event.results[0][0].confidence
        if (event.results[0].isFinal) {
          recognition.stop();
          this.scripts.push(this.transcript)
          this.transcript = ''
          this.setupSpeechRecognition()
        }
      }
      recognition.onspeechend = function() {
        console.log('ended')
        recognition.stop();
      }
      // 異常系
      recognition.onnomatch = function(event) {
      console.log('I didnt recognise that color.')
      }
      recognition.onerror = function(event) {
        console.log('Error occurred in recognition: ' + event.error);
      }
    }
  },
  mounted() {
    this.setupSpeechRecognition()
  }
})
</script>

<style scoped>
a {
  color: #42b983;
}
</style>