@corti/dictation-web

v0.4.0

Published

4 days ago

Web component for Corti Dictation

Downloads

1,619

Corti Dictation Web Component

Overview

The Corti Dictation Web Component is a web component that enables real-time speech-to-text dictation using Corti's Dictation API. It provides a simple interface for capturing audio, streaming it to the API, and handling transcripts.

This library offers two approaches:

Opinionated Component: Use <corti-dictation> for a complete, ready-to-use solution with built-in UI
Modular Components: Use individual components for maximum flexibility and custom UI implementations

Note: OAuth 2.0 authentication is not handled by this library. The client must provide an authorization token or token refresh function while using the component.

Component Architecture

Opinionated Component

<corti-dictation> - A complete, ready-to-use component that includes:

Recording button with visual feedback
Settings menu for device and language selection
Automatic state management
Built-in styling and theming

This is the easiest way to get started and works out of the box.

Modular Components

For more control and flexibility, you can use individual components:

<dictation-root> - Context provider that manages authentication, configuration, and shared state
<dictation-recording-button> - Standalone recording button with audio visualization
<dictation-settings-menu> - Settings menu with device and language selectors
<dictation-device-selector> - Device selection dropdown
<dictation-language-selector> - Language selection dropdown

These components share state through a context system, allowing you to build custom UIs while leveraging the same underlying functionality.

Installation

Install the package using your preferred package manager:

# npm
npm i @corti/dictation-web

# yarn
yarn add @corti/dictation-web

# pnpm
pnpm add @corti/dictation-web

# bun
bun add @corti/dictation-web

Then import the module in your code. You can either use a side-effect import to auto-register the component:

// Side-effect import - automatically registers the component
import '@corti/dictation-web';

Or import the component class directly:

// Named import - register the component manually if needed
import { CortiDictation } from '@corti/dictation-web';

Alternatively, use a CDN to start quickly (not recommended for production):

<script
  src="https://cdn.jsdelivr.net/npm/@corti/dictation-web/dist/bundle.js"
  type="module"
></script>

Demo

🚀 Hosted Demo

Quick Start

Here's a simple example to get you started:

<!DOCTYPE html>
<html lang="en">
<body>
<corti-dictation id="dictation"></corti-dictation>
<textarea
  id="transcript"
  placeholder="Transcript will appear here..."
></textarea>

<script type="module">
  import '@corti/dictation-web';

  const dictationEl = document.getElementById('dictation');
  const transcriptEl = document.getElementById('transcript');

  dictationEl.addEventListener('ready', () => {
    dictationEl.accessToken = 'YOUR_AUTH_TOKEN'; // Note: Never hardcode tokens
  });

  dictationEl.addEventListener('transcript', (e) => {
    if (e.detail.data.isFinal) {
      transcriptEl.value += e.detail.data.text + ' ';
    }
  });
</script>
</body>
</html>

Modular Example

For more control, use individual components to build a custom UI:

<!DOCTYPE html>
<html lang="en">
<body>
<dictation-root id="dictationRoot">
  <dictation-recording-button></dictation-recording-button>
  <dictation-settings-menu settingsEnabled="device,language"></dictation-settings-menu>
</dictation-root>

<textarea
  id="transcript"
  placeholder="Transcript will appear here..."
></textarea>

<script type="module">
  import '@corti/dictation-web';

  const root = document.getElementById('dictationRoot');
  const transcriptEl = document.getElementById('transcript');

  root.addEventListener('ready', () => {
    root.accessToken = 'YOUR_AUTH_TOKEN'; // Note: Never hardcode tokens
  });

  root.addEventListener('transcript', (e) => {
    if (e.detail.data.isFinal) {
      transcriptEl.value += e.detail.data.text + ' ';
    }
  });
</script>
</body>
</html>

Documentation

For more detailed information, see:

API Reference - Complete API documentation for properties, methods, and events
Authentication Guide - How to set up authentication with tokens and refresh mechanisms
Styling Guide - Customize the component's appearance with CSS variables and themes
Examples - Practical usage examples and demos
Development Guide - Information for contributors and developers

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme