Speechly Web Toolkit and Browser-UI

Quick installation from CDN

Include the resources in your <head> block: <head> <script type="text/javascript" src="https://speechly.github.io/browser-ui/v3/push-to-talk-button.js"></script> <script type="text/javascript" src="https://speechly.github.io/browser-ui/v3/big-transcript.js"></script> <link rel="stylesheet" href="https://speechly.github.io/browser-ui/v3/speechly-ui.css"> </head>


Include the following lines in your <body>:

<body> <div class="BigTranscriptContainer"> <big-transcript></big-transcript> </div> <div class="PushToTalkContainer"> <push-to-talk-button appid="ead4b9e7-e5c4-48ed-9dae-3c530916ed76"></push-to-talk-button> </div> </body>

Handling Speech Input

Listen for the broadcasted speechsegment messages: <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 emitted (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/v3/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: