VueJS Voice Command Button Remains Disabled After First Click – How Can I Fix It?

It sounds like the SpeechRecognition instance isn’t being reused properly. You’re currently creating a new instance inside your stopRecognition() function instead of using the one that’s handling the speech session. As a result, when you try to stop or restart recognition, you’re not interacting with the correct instance.

How to Fix

1. Create a single SpeechRecognition instance.
   Initialize the SpeechRecognition instance once (for example, in your component’s created or mounted hook) and store it in your component’s state (data or a ref).

2. Bind event callbacks.
   Set up the proper event listeners (like onend) so that you can reset the state when the recognition ends.

3. Re-use the same instance.
   Call start() and stop() on that instance rather than creating a new one every time.

Example

Below is an example of how to adjust your component:

VUECopied
<template>
  <div class="input">
    <button
      class="talk"
      :disabled="isRecording"
      @click="startListening"
    >
      <i class="fas fa-microphone-alt" />
    </button>
    <h1
      class="content"
      @click="startListening"
    >
      Konuş
    </h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRecording: false,
      recognition: null
    }
  },
  mounted() {
    // Create the recognition instance once
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition
    this.recognition = new SpeechRecognition()

    // Optional: set recognition parameters if needed
    this.recognition.continuous = false
    this.recognition.interimResults = false

    // When recognition ends, update the state:
    this.recognition.onend = () => {
      this.isRecording = false
    }

    // Handle results
    this.recognition.onresult = (event) => {
      const transcript = event.results[0][0].transcript
      console.log("You said: " + transcript)
      // Process the transcript as required
    }

    // Handle errors
    this.recognition.onerror = (error) => {
      console.error("Speech recognition error:", error)
      this.isRecording = false
    }
  },
  methods: {
    startListening() {
      // Check if already recording
      if (this.isRecording) return

      this.isRecording = true
      this.recognition.start()
    },
    stopRecognition() {
      // Stop the same recognition instance
      this.recognition.stop()
      // The onend callback will update isRecording once the recognition stops
    }
  }
}
</script>

<style>
/* Your CSS here */
</style>

Explanation

• Single Instance: By initializing the SpeechRecognition instance in the mounted hook, you ensure that the same instance is used for every start/stop cycle.
• Event Handlers: The onend callback resets your isRecording flag so that the button becomes clickable again once recognition is finished.
• Error Handling: In case of errors, the onerror callback also resets isRecording, which can help prevent the app from getting stuck.

With these changes, your talk button should work multiple times without needing a page refresh.