voicecapture-react

VoiceCapture Component

The VoiceCapture component is a React-based audio capture and transcription tool that leverages the browser's SpeechRecognition API. It provides an interactive UI to start, stop, and manage voice recognition, supporting multiple languages, display modes, and now includes clipboard integration to automatically copy the transcribed text.

Table of Contents

• Installation
• Usage
• Props
• Example
• Features

Installation

Install the component:

npm install voicecapture-react

Usage

import { useState } from "react";
import VoiceCapture from 'voicecapture-react';

const MyComponent = () => {
  const [start, setStart] = useState(false);
  const handleTranscript = (transcript) => {
    console.log("Transcript:", transcript);
  };

  return (
    <VoiceCapture
      start={start}
      lang="en"
      mode="fullscreen"
      clipboard={true}
      onVoiceTranscript={handleTranscript}
      onDeactivate={() => setStart(false)}
    />
  );
};

Props

Prop	Type	Default	Description
start	boolean	false	Controls whether voice recognition starts (true) or stops (false).
lang	string	"en"	Language for transcription (e.g., "pt" for Portuguese).
mode	string	"fullscreen"	Display mode for the component. Options: "fullscreen" or "float".
clipboard	boolean	false	If true, automatically copies the final transcript to the clipboard after recognition.
onVoiceTranscript	function	undefined	Callback function to handle the final transcribed text.
onDeactivate	function	undefined	Callback triggered when voice recognition stops.

Clipboard Integration

The clipboard prop enables automatic copying of the final transcript text to the clipboard once the voice recognition process is complete. This improves usability by allowing users to easily paste the transcribed text without any additional steps.

Example Usage with Clipboard:

<VoiceCapture
  start={start}
  lang="en"
  mode="fullscreen"
  clipboard={true}
  onVoiceTranscript={handleTranscript}
/>

Example

Below is an example using VoiceCapture with additional controls for language selection, display mode, and clipboard integration.

import { useState } from "react";
import VoiceCapture from "voicecapture-react";

function App() {
  const [start, setStart] = useState(false);
  const [transcript, setTranscript] = useState("");
  const [lang, setLang] = useState("en");
  const [mode, setMode] = useState<"fullscreen" | "float">("fullscreen");

  const handleVoiceTranscript = (text) => {
    setTranscript(text);
  };

  const openVoiceCapture = (selectedMode) => {
    setMode(selectedMode);
    setStart(true);
  };

  const handleDeactivate = () => {
    setStart(false);
  };

  return (
    <>
      <VoiceCapture
        start={start}
        lang={lang}
        mode={mode}
        clipboard={true}
        onVoiceTranscript={handleVoiceTranscript}
        onDeactivate={handleDeactivate}
      />
      <div>
        <h2>VoiceCapture Example</h2>

        <div>
          <button onClick={() => openVoiceCapture("fullscreen")}>Fullscreen Mode</button>
          <button onClick={() => openVoiceCapture("float")}>Float Mode</button>

          <label>
            Select Language:
            <select value={lang} onChange={(e) => setLang(e.target.value)}>
              <option value="en">English</option>
              <option value="pt">Portuguese</option>
              <option value="es">Spanish</option>
              <option value="fr">French</option>
            </select>
          </label>

          <label>
            Enable Clipboard:
            <input
              type="checkbox"
              checked={clipboard}
              onChange={(e) => setClipboard(e.target.checked)}
            />
          </label>
        </div>
      </div>

      {transcript && (
        <div>
          <h2>Transcript Results</h2>
          <textarea readOnly value={transcript} placeholder="Voice transcript will appear here..." />
        </div>
      )}
    </>
  );
}

export default App;

In this example:

• Modes: Toggle between fullscreen and float display modes.
• Languages: Select a language for speech recognition.
• Clipboard: Option to enable or disable automatic copying of the transcript text.
• Transcript Display: View the transcribed text once captured.

Features

• Real-time Voice Transcription: Instantly capture and display voice input as text.
• Clipboard Integration: Automatically copies the final transcript to the clipboard, making it easy to paste the text elsewhere.
• Editable Transcripts: Users can modify the transcribed text through input fields or text areas.
• Customizable Events: Easily handle transcription results and changes in voice recognition status.