@corti/dictation-web
Web components for real-time, single-speaker dictation on the Corti Transcribe API.
- All-in-one:
<corti-dictation>— recording button, settings, keyboard shortcuts, and theming - Modular:
<dictation-root>plus<dictation-recording-button>,<dictation-settings-menu>, and selectors for custom layouts
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.
For multi-speaker ambient streaming, use @corti/ambient-web instead.
Installation
npm i @corti/dictation-web
# yarn add @corti/dictation-web
# pnpm add @corti/dictation-web
import "@corti/dictation-web";
// or: import { CortiDictation } from "@corti/dictation-web";
CDN (quick try only):
<script type="module" src="https://cdn.jsdelivr.net/npm/@corti/dictation-web/dist/bundle.js"></script>
Quick start
<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-access-token>";
});
dictationEl.addEventListener("transcript", (e) => {
if (e.detail.data.isFinal) {
transcriptEl.value += `${e.detail.data.text} `;
}
});
</script>
Modular layout
<dictation-root id="dictationRoot">
<dictation-recording-button></dictation-recording-button>
<dictation-settings-menu settingsEnabled="device,language,keybinding"></dictation-settings-menu>
</dictation-root>
<script type="module">
import "@corti/dictation-web";
const root = document.getElementById("dictationRoot");
root.addEventListener("ready", () => {
root.accessToken = "<your-access-token>";
});
</script>
Modular components require <dictation-root> as a parent. They share state through Lit context.
| Component | Role |
|---|---|
<dictation-root> | Context provider (auth, config, devices, keybindings) |
<dictation-recording-button> | Start/stop with audio visualization |
<dictation-settings-menu> | Device, language, and keybinding UI |
<dictation-device-selector> | Device dropdown |
<dictation-language-selector> | Language dropdown |
<dictation-keybinding-selector> | Push-to-talk / toggle-to-talk keys |
Keybindings
Defaults: Enter (toggle-to-talk), Space (push-to-talk). Key names (event.key) and codes (event.code) are supported. Shortcuts are ignored while focus is in inputs. If both modes use the same key, toggle-to-talk wins.
Configure on <corti-dictation> or <dictation-root>:
<corti-dictation toggleToTalkKeybinding="`" pushToTalkKeybinding="Space"></corti-dictation>
Documentation
Repository
Source and issue tracking: github.com/corticph/dictation-web