VoiceCapture Vue

VoiceCapture Vue is a Vue component for real-time voice capture and speech transcription. This component leverages the Web Speech API for speech recognition and provides an interactive UI.

Installation

Install voicecapture-vue via npm:

npm install voicecapture-vue

Basic Usage

Script Setup

<script setup>
import { ref } from 'vue';
import VoiceCapture from 'voicecapture-vue';

const isVoiceCaptureActive = ref(false);
const selectedLang = ref('en');
const selectedMode = ref('fullscreen');
const transcript = ref('');

function handleTranscript(text) {
  transcript.value = text;
}

function handleStatusChange(status) {
  isVoiceCaptureActive.value = status;
}
</script>

Template Example

Use the component in your template with language and mode options:

<template>
  <div>
    <VoiceCapture
      :status="isVoiceCaptureActive"
      :lang="selectedLang"
      :mode="selectedMode"
      :clipboard="true"
      @voiceTranscript="handleTranscript"
      @onStatus="handleStatusChange"
    />
    <textarea v-model="transcript" placeholder="Transcript results"></textarea>
  </div>
</template>

Props

Prop	Type	Default	Description
status	Boolean	false	Toggles the voice capture on/off. Set to true to activate voice recognition.
lang	String	"en"	Specifies the language for speech recognition (e.g., "pt" for Portuguese).
mode	String	"fullscrenn"	Defines the display mode: "float" for inline, "fullscreen" for full-screen.
clipboard	Boolean	false	If true, copies the final transcript text to the clipboard automatically.

Events

Event	Payload	Description
@voiceTranscript	String	Emitted with the transcription generated from the user's speech.
@onStatus	Boolean	Emitted when the voice capture status changes (active/inactive).