Big Transcript

Big Transcript is an overlay-style component that displays real-time speech-to-text transcript and feedback to the user. Recognized entities are highlighted.

The component is momentarily displayed when speech input is used and automatically hidden shortly after. The recommended placement is near top-left corner of the screen.

The application code can signal the component to display a confirmation mark to let the user know that the voice command was successfully responded to.

You can customise the appearance of the component.

Usage

  <script type="text/javascript" src="https://unpkg.com/@speechly/browser-ui/core/big-transcript.js"></script>

  <big-transcript
    placement="top"
    formattext="false" >
  </big-transcript>

Attributes

placement - Optional “top” turns on internal placement without BigTranscriptContainer CSS class
hoffset - Optional CSS string. Horizontal distance from viewport edge. Only effective when using placement.
voffset - Optional CSS string. Vertical distance from viewport edge. Only effective when using placement.
fontsize - Optional CSS string for text size. Default: “1.5rem”
color - Optional string (CSS color) for text. Default: “#ffffff”
highlightcolor - Optional string (CSS color) for entity highlighting, vu meter and acknowledged icon. Default: “#15e8b5”
backgroundcolor - Optional string (CSS color) for hint text background. “none” for no background. Default: “#202020”
marginbottom - Optional string (CSS dimension). Dynamic margin added when element is visible. Default: “0rem”
formattext - Optional “true” | “false”. If true, transcript is formatted with detected entities, e.g. numbers. Default: “true”
demomode - Optional “true” | “false”. If true, transitions are slowed down for better readablility. Default: “false”
customtypography - Optional “true” | “false”. True inherits css typography settings. Default: “false”
customcssurl - Optional string (url to .css file). Allows for further customization of component’s shadow root.

Properties

speechsegment(segment: Segment) - Function. Call whenever a new segment update is available
speechstate(state: ClientState) - Function. Call whenever ClientState changes. Needed to show/hide element.
speechhandled(success: boolean) - Function. Optionally call on segment.isFinal to show confirmation that speech was processed. An indication will be shown with big-transcript.

Events emitted

visibilitychanged - Called when visibility changes

Window messages listened

{type: "speechstate", state: ClientState} - Required. Needed to show/hide element. This message is automatically emitted by push-to-talk-button.
{type: "speechsegment", segment: Segment} - Required. Updates transcript content in component. This message is automatically emitted by push-to-talk-button.
{type: "speechhandled", success: boolean} - Optional. Shows an indication to the user that the voice command was successfully understood by the app. Use window.postMessage to send it on segment.isFinal.

Place <BigTranscript> component inside your <SpeechProvider> block. Please see Basic usage for a full app example.

  import { BigTranscript } from "@speechly/react-ui";

  ...
  <SpeechProvider appId="YOUR_APP_ID_FROM_SPEECHLY_DASHBOARD">
    <BigTranscript
      placement="top"
      formatText={false}
    />
  </SpeechProvider>
  ...

Properties

Name	Type	Description
`placement?`	`string`	Optional “top” string turns on internal placement without any CSS positioning.
`formatText?`	`boolean`	Optional boolean. If true, transcript is formatted with detected entities, e.g. numbers. Default: true
`fontSize?`	`string`	Optional CSS string for text size. Default: “1.5rem”
`color?`	`string`	Optional string (CSS color) for text. Default: “#ffffff”
`highlightColor?`	`string`	Optional string (CSS color) for entity highlighting, vu meter and acknowledged icon. Default: “#15e8b5”
`backgroundColor?`	`string`	Optional string (CSS color) for hint text background. Default: “#202020”
`marginBottom?`	`string`	Optional string (CSS dimension). Dynamic margin added when element is visible. Default: “0rem”
`mockSegment?`	`SpeechSegment`	Optional SpeechSegment to be displayed instead of actual transcription from API. Can be used to demonstrate voice functionality to the user.

Window messages listened

{type: "speechhandled", success: boolean} - Optional. Shows an indication to the user that the voice command was successfully understood by the app. Use window.postMessage to send it on segment.isFinal.

Displaying the confirmation checkmark

Once the application has successfully responded to the voice input, send a speechhandled message to display the confirmation mark:

window.postMessage({ type: "speechhandled", success: true }, "*");