Speechly Web Components

Quick installation from CDN

Include the resources in your <head> block: <head> <script type="text/javascript" src="https://speechly.github.io/browser-ui/latest/push-to-talk-button.js"></script> <script type="text/javascript" src="https://speechly.github.io/browser-ui/latest/big-transcript.js"></script> <script type="text/javascript" src="https://speechly.github.io/browser-ui/latest/error-panel.js"></script> </head> These scripts add Speechly's components to the page's custom element registry to be used in HTML markup as shown below.


Include the following lines in your <body> to enable turning listening on/off and showing the transcript:

<body> <big-transcript placement="top" > </big-transcript> <push-to-talk-button appid="ead4b9e7-e5c4-48ed-9dae-3c530916ed76" placement="bottom" > </push-to-talk-button> <error-panel placement="bottom" > </error-panel> </body>

Handling Speech Input

Listen for the broadcasted speechsegment messages to perform actions: <script type="text/javascript"> window.addEventListener("message", (e) => { if (e.data.type === "speechsegment") { const segment = e.data.segment; // Handle speech segment and make tentative changes to app state console.log("speechsegment message:", segment); if (segment.isFinal) { // Handle speech segment and make permanent changes to app state // Optionally show confirmation window.postMessage({ type: "speechhandled", success: true }, "*"); } } }); </script>

Element <push-to-talk-button/>

Autonomous customElement for connecting to Speechly and controlling listening on/off.


Events emitted

Window messages sent (postMessage)

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.



Events emitted

Window messages listened

Element <holdable-button/>

Autonomous customElement that displays a stateless, holdable button with an icon and emits events on press.


<head> <script type="text/javascript" src="https://speechly.github.io/browser-ui/latest/holdable-button.js"></script> </head>



Events emitted

Browser-UI Playground Log

Try it out! Hold the button and talk. You can also try holding the hot key (SPACE) to activate listening.

The listening hot key is disabled if an element like input has focus: