https://github.com/angular-a11y/voicecapture-angular
https://github.com/angular-a11y/voicecapture-angular
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/angular-a11y/voicecapture-angular
- Owner: angular-a11y
- Created: 2024-10-19T23:32:07.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2024-10-26T20:11:13.000Z (6 months ago)
- Last Synced: 2024-10-27T01:55:23.072Z (6 months ago)
- Language: TypeScript
- Homepage: https://voicecapture-angular.web.app
- Size: 2.8 MB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-angular - voicecapture-angular - The library offers customizable options for handling voice input and transcription, making it a flexible solution for enhancing user interfaces. (Table of contents / Third Party Components)
- awesome-angular - voicecapture-angular - The library offers customizable options for handling voice input and transcription, making it a flexible solution for enhancing user interfaces. (Table of contents / Third Party Components)
- trackawesomelist - voicecapture-angular (⭐3) - The library offers customizable options for handling voice input and transcription, making it a flexible solution for enhancing user interfaces. (Recently Updated / [Oct 26, 2024](/content/2024/10/26/README.md))
README
# voicecapture-angular
`voicecapture-angular` is an Angular library designed to provide seamless voice capture and transcription capabilities for web applications. With an easy-to-use API, `voicecapture-angular` allows developers to integrate voice recognition features effortlessly, enabling users to interact with applications using their voice. The library offers customizable options for handling voice input and transcription, making it a flexible solution for enhancing user interfaces.
## Installation
To install `voicecapture-angular`, run the following command:
```bash
npm install voicecapture-angular
```
## Usage Example
```typescript
import { Component } from '@angular/core';
import { signal, WritableSignal } from 'signals';
import { VoiceCapture } from 'voicecapture-angular';
@Component({
selector: 'app-voicecapture-example',
templateUrl: './voicecapture-example.component.html',
})
export class VoiceCaptureExampleComponent {
isVoiceCaptureExample: WritableSignal = signal(false);
voiceTextTranscript!: string;
openVoiceCapture() {
this.isVoiceCaptureExample.set(true);
}
returnVoiceTranscript(transcript: string) {
this.voiceTextTranscript = transcript;
}
}
```
### HTML Template
```html
Open VoiceCapture Example
@if(voiceTextTranscript) {
Transcript Results
{{ voiceTextTranscript }}
Input Example:
{{ voiceTextTranscript }}
}
```
## Component Setup
In the `VoiceCaptureExampleComponent`, a `WritableSignal` named `isVoiceCaptureExample` is defined and initialized to `false`. The `openVoiceCapture` method sets `isVoiceCaptureExample` to `true`, triggering the voice capture process. The `enableClipboard` property is used to enable clipboard integration.
## Inputs
| Input | Type | Default | Description |
|-------------|-----------------------|-------------|----------------------------------------------------------------------------------------------|
| `start` | `WritableSignal` | `false` | Controls the initiation of voice capture. |
| `lang` | `string` | `"en"` | Specifies the language for speech recognition (e.g., `"pt"` for Portuguese). |
| `mode` | `string` | `"fullscreen"` | Defines the display mode: `"float"` for inline, `"fullscreen"` for full-screen. |
| `clipboard` | `boolean` | `false` | Enables copying the final transcript text to the clipboard automatically. |
### Example with Clipboard:
```html
```
## Outputs
| Output | Payload | Description |
|---------------------|-------------|-------------------------------------------------------------------------------------------------|
| `voiceTranscript` | `string` | Emitted with the transcribed voice input. |
## Features
- **Real-time Voice Transcription**: Instantly capture and display voice input as text.
- **Editable Transcripts**: Users can modify the transcribed text through input fields or text areas.
- **Clipboard Integration**: Automatically copies the final transcript to the clipboard, streamlining user workflows.
- **Customizable Events**: Easily handle transcription results with customizable output events.