if (transcript.includes … how to limit response?

[steven-js]

Hi,

I'd like to run a function if the transcript includes a specific word however when I console.log, or run a function, it runs multiple times.

Is there a way to make the function fire just once?

Thanks!

[JamesBrill]

Hi @stevencmh could you share a code snippet so I can understand how you are using the library?

Do you mean that if the user says the specific word multiple times, you only want to run the function on the first time they say it? If that's the case, you could store a boolean to decide if the function does anything and flip it the first time the function is called. Something like:

const createOneTimeCallback = () => {
  let called = false;
  return () => {
    if (!called) {
      console.log('do something');
    }
    called = true;
  }
}

const callback = createOneTimeCallback();
// Use the callback when processing the transcript

Or if you want to call the function multiple times, but only once for each time the word is spoken, you could also try focusing on changes to finalTranscript:

• Keep track of the previous value of finalTranscript
• Use a React effect hook to detect changes to finalTranscript
• Whenever it changes, take the difference between the previous value and the new value. Call the function if the word is in that string
• This way, you will only call the function once for each new piece of speech

Alternatively, you could also try making use of commands, especially if you aren't using continuous listening.

If you're still stuck, share some code and I'll see what I can do to help. Your use case seems totally reasonable, so I'm keen to make sure it's supported.

[steven-js]

Hi @JamesBrill thanks for posting back!

I'd like to call a function once if there is a matching word in the transcript using the code below, but it ends up firing multiple times. Would I use commands to achieve this?

import React from 'react';
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';

const Dictaphone = () => {
  const {
    transcript,
    listening,
    resetTranscript,
    browserSupportsSpeechRecognition
  } = useSpeechRecognition();

  if (!browserSupportsSpeechRecognition) {
    return <span>Browser doesn't support speech recognition.</span>;
  }

  if
    (transcript.includes('test')) {
    console.log('do something')
    var div = document.createElement("div");
    div.innerHTML = "Here is a reply example";
    document.body.appendChild(div);
  }


  return (
    <div>
      <p>Microphone: {listening ? 'on' : 'off'}</p>
      <button onClick={SpeechRecognition.startListening}>Start</button>
      <button onClick={SpeechRecognition.stopListening}>Stop</button>
      <button onClick={resetTranscript}>Reset</button>
      <p>{transcript}</p>
    </div>
  );
};
export default Dictaphone;

[JamesBrill]

You are running your transcript processor on every render, meaning the same transcript will be processed multiple times, even if it's not the transcript state that got updated.

One solution is to use useEffect to only process the transcript when it changes, specifically the finalTranscript state, which will only change once for each utterance:

import React, { useEffect } from 'react'
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition'

const Dictaphone = () => {
  const {
    transcript,
    finalTranscript,
    listening,
    resetTranscript,
    browserSupportsSpeechRecognition
  } = useSpeechRecognition()

  useEffect(() => {
    if (finalTranscript.includes('test')) {
      console.log('do something')
      var div = document.createElement("div")
      div.innerHTML = "Here is a reply example"
      document.body.appendChild(div)
    }
  }, [finalTranscript])

  if (!browserSupportsSpeechRecognition) {
    return <span>Browser doesn't support speech recognition.</span>
  }

  return (
    <div>
      <p>Microphone: {listening ? 'on' : 'off'}</p>
      <button onClick={SpeechRecognition.startListening}>Start</button>
      <button onClick={SpeechRecognition.stopListening}>Stop</button>
      <button onClick={resetTranscript}>Reset</button>
      <p>{transcript}</p>
    </div>
  )
}

export default Dictaphone

Let me know if that works for you!

[steven-js]

Hi @JamesBrill that's brilliant … thank you so much!

[steven-js]

Hi @JamesBrill

I was wondering, is it possible to create an Alexa type experience?

So if the word 'test' is said, a question pops up and then switches to listening for the user to say 'yes' or 'no' for example?

Would that code go in here:

  useEffect(() => {
    if (finalTranscript.includes('test')) {
      console.log('do something')
      var div = document.createElement("div")
      div.innerHTML = "Did you ask a question?"
      document.body.appendChild(div)
      // start listening ******
      // then do something ******
    }
  }, [finalTranscript])

[JamesBrill]

Hi @stevencmh You can create such an experience, though you will need the user to explicitly trigger the initial listening for the word "test". You cannot automatically turn on listening without the user performing an explicit action like a click shortly beforehand - aside from Chrome, most browsers will not allow this.

So you would need two things:

• A button to start listening for "test"
• Your own state to indicate whether the app has switched from "activation mode" to "command mode"

Then in your useEffect hook, you can have some logic like:

if (isCommandMode) {
  // process finalTranscript
} else if (finalTranscript.includes('test')) {
  // set isCommandMode to true and update the UI to indicate the app is ready to receive commands
}

[steven-js]

Thank you @JamesBrill I will try this.