JamesBrill / react-speech-recognition

💬Speech recognition for your React app
https://webspeechrecognition.com/
MIT License
657 stars 119 forks source link

[Feature] It would be nice to have a start command. #50

Closed EggTronic closed 4 years ago

EggTronic commented 4 years ago

Just like 'Hi Siri' on ios.

JamesBrill commented 4 years ago

Hi @EggTronic, here is a simple example of a "Hey Siri" start command using react-speech-recognition:

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

const Dictaphone = () => {
  const [speech, setSpeech] = useState('')
  const commands = [
    {
      command: 'hey siri *',
      callback: (speech) => setSpeech(speech),
      matchInterim: true
    }
  ]
  const { finalTranscript, resetTranscript } = useSpeechRecognition({ commands })

  useEffect(() => {
    SpeechRecognition.startListening({ continuous: true })
  })
  useEffect(() => {
    // If the user has finished saying something
    if (finalTranscript) {
      // If they said "Hey Siri" when they spoke
      if (speech) {
        // Do something with the speech
        console.log('Processing speech:', speech)
        setSpeech('')
      }
      resetTranscript()
    }
  }, [speech, finalTranscript])

  if (!SpeechRecognition.browserSupportsSpeechRecognition()) {
    return null
  }

  return speech && <span>Hey Siri, {speech}</span>
}

export default Dictaphone

Hope that gives you some ideas!

EggTronic commented 4 years ago

Yes, using hooks properly can do the job.

Thanks, but still would be nice to use as the following way: useSpeechRecognition({ commands, startCommand: "Hey, Siri" })