@veeramani1234/voice-to-text

A premium, production-ready, highly customizable React voice-to-text floating microphone package. It connects to the fyral.ai WebSocket streaming endpoint, captures microphone input, and automatically inserts live transcripts into focused inputs, textareas, and contenteditable elements.

This package works seamlessly across all major React build setups (Vite, Next.js, Create React App) and is fully compatible with third-party UI component libraries (HeroUI, MUI, Ant Design, Chakra UI, Mantine).

Features

• 🎙️ Vanilla JS Core: Lightweight, zero-dependency engine written in TypeScript.
• ⚛️ First-Class React / Next.js Support: Includes custom hooks and a pre-styled premium microphone button.
• 🎛️ Floating & Draggable Component: React button component features optional smooth fixed-positioning and drag-to-reposition capabilities.
• ⚡ SSR Safe: Fully optimized for Server-Side Rendering (Next.js App & Pages Routers).
• 🧩 Angular & Vue Compatible: Decoupled entry points prevent React bundle pollution in non-React applications.

Installation

npm install react-voice-floating-mic

Usage

1. Using the Button Component (VoiceToTextButton)

Place the floating microphone button at the root of your application (or within a portal).

import React from 'react';
import { VoiceToTextButton } from 'react-voice-floating-mic';

export default function App() {
  return (
    <div className="app-container">
      <h2>Voice Enabled Form</h2>
      <input type="text" placeholder="Click to focus input and start speaking..." />
      <div contenteditable="true" style={{ border: '1px solid #ccc', minHeight: '100px', padding: '8px' }}>
        Click to focus contenteditable and dictate...
      </div>

      {/* Floating draggable microphone widget */}
      <VoiceToTextButton
        projectId="YOUR_FYRAL_PROJECT_ID"
        floating={true}
        insertIntoFocusedInput={true}
        size="md"
        accentColor="#4f46e5"
        recordingColor="#ef4444"
      />
    </div>
  );
}

2. Using the Custom Hook (useVoiceToText)

Provides hooks and actions to build your own custom voice-to-text elements.

import React from 'react';
import { useVoiceToText } from 'react-voice-floating-mic';

export default function CustomTranscriber() {
  const {
    isRecording,
    isConnected,
    transcript,
    error,
    startRecording,
    stopRecording,
    resetTranscript,
  } = useVoiceToText({
    projectId: 'YOUR_PROJECT_ID',
    autoStopTimeout: 60000,
    onTranscript: (text, isFinal) => {
      console.log(`Transcribed: ${text} (Final: ${isFinal})`);
    },
  });

  return (
    <div>
      <p>Status: {isRecording ? (isConnected ? 'Recording...' : 'Connecting...') : 'Idle'}</p>
      <button onClick={isRecording ? stopRecording : startRecording}>
        {isRecording ? 'Stop' : 'Start'}
      </button>
      <button onClick={resetTranscript}>Reset</button>
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <div>{transcript}</div>
    </div>
  );
}

API & Props Reference (VoiceToTextButton)

| Prop | Type | Default | Description | |---|---|---|---| | projectId | string | Required | Your project ID for authorization. | | apiWssUrl | string | wss://fyral.ai/api/ws/transcribe?project_id= | Overrides the WebSocket endpoint URL. | | className | string | "" | Additional CSS class for the button container. | | style | React.CSSProperties | undefined | Inline styles for the button container. | | buttonLabel | string | undefined | Visual text label rendered inside the button (changes it from circular to pill-shaped). | | accentColor | string | "#4f46e5" | Idle ripple animations and custom outline/focus border colors. | | recordingColor | string | "#ef4444" | Recording ripples and indicator animations color. | | micColor | string | "#ffffff" | Icon stroke and fill color. | | backgroundColor | string | undefined | Custom gradient/color overrides for the idle button state. | | recordingBackgroundColor | string | undefined | Custom gradient/color overrides for the recording button state. | | removeBg | boolean | false | If true, removes background gradients and shadows (transparent mode). | | insertIntoFocusedInput | boolean | true | Inserts transcription directly into the currently focused editable element. | | micIcon | React.ReactNode | undefined | Custom icon to render during idle state. | | stopIcon | React.ReactNode | undefined | Custom icon to render during recording state. | | autoStopTimeout | number | 120000 (120s) | Timeout duration in milliseconds to automatically stop recording. | | floating | boolean | false | Enables floating widget layout and Pointer Events dragging. | | defaultVisible | boolean | true | Initial visibility state of the button widget. Toggle with Ctrl+M. | | size | 'sm' \| 'md' \| 'lg' \| number | 'md' | Adjusts button diameter (sm: 48px, md: 64px, lg: 80px, or custom pixel numbers). | | onTranscriptChange | (transcript: string) => void | undefined | Callback fired when the transcript updates. | | onRecordingChange | (isRecording: boolean) => void | undefined | Callback fired when recording state changes. | | onConnectedChange | (isConnected: boolean) => void | undefined | Callback fired when connection state changes. | | onErrorChange | (error: string \| null) => void | undefined | Callback fired when errors are received. | | isDrawerOpen | boolean | undefined | Prop to notify the button when a drawer or modal overlay opens. | | portalContainer | HTMLElement \| null \| string | document.body | Custom selector or element to portal the button into. |