https://github.com/nightdevilpt/react-voice-handler

https://github.com/nightdevilpt/react-voice-handler

Last synced: 5 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/nightdevilpt/react-voice-handler
• Owner: NightDevilPT
• Created: 2024-09-19T01:58:40.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-09-20T01:25:12.000Z (over 1 year ago)
• Last Synced: 2025-07-20T01:15:34.877Z (5 months ago)
• Language: TypeScript
• Size: 23.4 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

          


  
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 });