Speechly Browser-UI

Installation from CDN

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

Usage

Include the following lines in your <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>

Handling Speech Input

Listen for the broadcasted segment-update messages: <script type="text/javascript"> window.addEventListener("message", (e) => { if (e.data.type === "segment-update") { const segment = e.data.segment; console.log("segment-update message:", segment); } }); </script>

Element <push-to-talk-button/>

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

Attributes

Properties

Events emitted

Window messages emitted

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

Events listened

Window messages listened

Browser-UI Playground Log

Try it out! Hold the button and talk.