Speechly Browser-UI
Installation from CDN
Include the resources in your<head>
block:
Usage
Include the following lines in your <body>
:
Handling Speech Input
Listen for the broadcasted segment-update messages:Element <push-to-talk-button/>
Autonomous customElement for connecting to Speechly and controlling listening on/off.Attributes
- appid - Speechly App id to connect to.
- capturekey - Optional string (of length 1). Defines a keyboard hotkey that with control listening on/off. Default: undefined. Recommendation: Space (" ")
- size - Optional string (CSS). Defines the button frame width and height. Default: "6rem"
- icon - Optional string. Defines the initial icon on button: idle | ready | noaudioconsent | failed | nobrowsersupport
Properties
- onholdstart - set callback function to be triggered upon hold start
- onholdend - set callback function to be triggered upon hold end
Events emitted
- onholdstart - CustomEvent triggered upon hold start
- onholdend - CustomEvent triggered upon hold end
- segment-update - CustomEvent triggered when speech-to-text segment changes. Segment available as the event.details property.
- error - Details: Failed | NoBrowserSupport | NoAudioConsent
Window messages emitted
- {type: "segment-update", segment: {} as Segment} - Uses postMessage to broadcast new segment when an update is available
Element <big-transcript/>
<big-transcript/>
is an overlay-style component for displaying real-time speech-to-text transcript.
It is intended to be placed as an overlay near top-left corner of the screen using BigTranscriptContainer
CSS class. It is momentarily displayed and automatically hidden after the end of voice input.
Properties
- onsegmentupdate(segment) - Call whenever a new segment update is available
Events listened
- "segment-update", {detail: {} as Segment} - Expect an update whenever a new segment update is available
Window messages listened
- {type: "segment-update", segment: {} as Segment} - Expects an update whenever a new segment update is available
Browser-UI Playground Log
Try it out! Hold the button and talk.