react-voice-handler

React Voice Handler

React Voice Handler is a lightweight custom hook for recognizing voice commands using the Web Speech API in React applications. It allows you to trigger actions based on voice input, making your applications more interactive.

Features

• Supports custom voice commands.
• Triggers actions based on recognized speech.
• Works with the Web Speech API (supports both Chrome and Edge with webkitSpeechRecognition fallback).
• Handles both continuous and non-continuous recognition modes.
• Supports multiple languages and dialects, with a wide selection of languages through the LangEnum.

Installation

To install this package in your project, run the following command:

npm install react-voice-handler

Usage

Here’s an example of how to use useVoiceCommands in your React application:

import React from 'react';
import { useVoiceCommands, LangEnum } from 'react-voice-handler';
const App: React.FC = () => {
const commands = [
{ command: 'hello', action: () => alert('Hello there!') },
{ command: '안녕하세요', action: () => alert('hello') },
{ command: 'goodbye', action: () => alert('Goodbye!') },
];
const { startRecognition, stopRecognition } = useVoiceCommands(commands, { continuous: true, lang: LangEnum.EnglishUS });
return (
<div>
<h1>Voice Command App</h1>
<button onClick={startRecognition}>Start Listening</button>
<button onClick={stopRecognition}>Stop Listening</button>
</div>
);
};
export default App;

Language Support

The useVoiceCommands hook supports a wide range of languages and dialects through the LangEnum. By default, it uses LangEnum.EnglishUS, but you can customize the language by passing the lang option in the configuration object.

For example, to use Spanish (Spain):

const { startRecognition, stopRecognition } = useVoiceCommands(commands, { lang: LangEnum.SpanishSpain });
  

Available Languages

Here are some of the available languages in the LangEnum:

• English (US) - LangEnum.EnglishUS
• English (UK) - LangEnum.EnglishUK
• Spanish (Spain) - LangEnum.SpanishSpain
• French (France) - LangEnum.FrenchFrance
• German (Germany) - LangEnum.GermanGermany
• Chinese (Simplified) - LangEnum.ChineseSimplified
• Japanese (Japan) - LangEnum.JapaneseJapan
• Russian (Russia) - LangEnum.RussianRussia

Continuous vs Non-Continuous Modes

Continuous Mode allows the voice recognition to keep listening after recognizing a command. Use this mode if you expect multiple commands over time without manually restarting the recognition.

const { startRecognition, stopRecognition } = useVoiceCommands(commands, { continuous: true });
  

Non-Continuous Mode stops the voice recognition after recognizing a command. Use this mode if you only expect a single command and want to manually restart recognition.

const { startRecognition, stopRecognition } = useVoiceCommands(commands, { continuous: false });
  

Hook API

The hook accepts the following parameters:

• commands: An array of objects where each object contains a command string and an action function. Example:

  
  const commands = [
  { command: 'hello', action: () => alert('Hello there!') },
  { command: '안녕하세요', action: () => alert('hello') },
  { command: 'goodbye', action: () => alert('Goodbye!') },
  ];
        

• continuous (optional): A boolean indicating if the recognition should continue after recognizing a command. Default is false.
• lang (optional): A language variant from the LangEnum enum. Example: LangEnum.EnglishUS. Default is LangEnum.EnglishUS.

Error Handling

The hook allows error handling by passing a custom onError function in the options. For example:

const handleError = (error) => {
  console.error('Speech recognition error:', error);
};
const { startRecognition, stopRecognition } = useVoiceCommands(commands, { onError: handleError });