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

NameTypeDescription
placement?stringOptional “top” string turns on internal placement without any CSS positioning.
formatText?booleanOptional boolean. If true, transcript is formatted with detected entities, e.g. numbers. Default: true
fontSize?stringOptional CSS string for text size. Default: “1.5rem”
color?stringOptional string (CSS color) for text. Default: “#ffffff”
highlightColor?stringOptional string (CSS color) for entity highlighting, vu meter and acknowledged icon. Default: “#15e8b5”
backgroundColor?stringOptional string (CSS color) for hint text background. Default: “#202020”
marginBottom?stringOptional string (CSS dimension). Dynamic margin added when element is visible. Default: “0rem”
mockSegment?SpeechSegmentOptional 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 }, "*");

Last updated by Mathias Lindholm on January 26, 2022 at 11:45 +0200

Found an error on our documentation? Please file an issue or make a pull request