<template>
  <q-page class="flex flex-center">
    <div class="q-pa-md">
      <q-btn @click="startRecognition" label="Start" color="primary" />
      <p class="q-mt-md">Result: {{ transcript }}</p>
    </div>
  </q-page>
</template>

<script>
// ich glaube das wird hiermit nicht funktonieren

export default {
  name: 'TestWebSpeechApi',
  data() {
    return {
      transcript: '',
      recognition: null
    }
  },
  methods: {
    startRecognition() {
      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition
      
      if (!SpeechRecognition) {
        this.transcript = 'Speech Recognition not supported in this browser!'
        return
      }

      this.recognition = new SpeechRecognition()
      this.recognition.lang = 'en-EN'
      this.recognition.interimResults = false
      this.recognition.maxAlternatives = 1

      this.recognition.onresult = (event) => {
        this.transcript = event.results[0][0].transcript
      }

      this.recognition.onerror = (event) => {
        this.transcript = 'Error: ' + event.error
      }

      this.recognition.start()
    }
  }
}

</script>