https://github.com/angular-a11y/voicecapture-angular

https://github.com/angular-a11y/voicecapture-angular

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/angular-a11y/voicecapture-angular
• Owner: angular-a11y
• Created: 2024-10-19T23:32:07.000Z (3 months ago)
• Default Branch: master
• Last Pushed: 2024-10-26T20:11:13.000Z (3 months ago)
• Last Synced: 2024-10-27T01:55:23.072Z (3 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:

  


  Textarea Example:

  

  

    {{ voiceTextTranscript }}

  

}

```

## Component Setup

In the `VoiceCaptureExampleComponent`, a `WritableSignal` named `isVoiceCaptureExample` is defined, initialized to `false`. The `openVoiceCapture` method sets `isVoiceCaptureExample` to `true`, which triggers the voice capture process.

## Inputs

### @Input() start: WritableSignal

Controls the initiation of voice capture.

### @Input() lang: string = 'en'

Language of voice capture, this default is en.

### @Input() mode: string = 'fullscreen'

Mode of voice capture, this default is `fullscreen` other value `float`.

**Example**: Start capturing voice input.

```html

```

### Outputs

### (voiceTranscript)

An event that emits the transcribed voice input. 

**Example**: Capture and use the transcribed text.

```typescript

returnVoiceTranscript(transcript: string) {

  this.voiceTextTranscript = transcript;

}

```

## 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.

- **Customizable Events**: Easily handle transcription results with customizable output events.