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://speechly.github.io/browser-ui/latest/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"

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: "speechsegment", segment: Segment} - Required. Updates transcript content in component. This message is automatically emitted by push-to-talk-button.
  • {type: "speechstate", state: ClientState} - Required. Needed to show/hide element. 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
backgroundColor?stringOptional string (CSS color) for hint text background. Default: “#202020”
color?stringOptional string (CSS color) for text. Default: “#ffffff”
fontSize?stringOptional CSS string for text size. Default: “1.5rem”
formatText?booleanOptional boolean. If true, transcript is formatted with detected entities, e.g. numbers. Default: true
highlightColor?stringOptional string (CSS color) for entity highlighting, vu meter and acknowledged icon. Default: “#15e8b5”
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.
placement?stringOptional “top” string turns on internal placement without any CSS positioning.

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 }, "*");

Profile image for Ari Nykänen

Last updated by Ari Nykänen on September 29, 2021 at 11:32 +0300

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