Push-To-Talk Button

Push-To-Talk Button is a holdable switch for controlling listening for speech. Pressing the button starts listening by calling startContext. Releasing it turns listening off by calling stopContext. Desktop users can control listening on/off with an optional keyboard hotkey, e.g. space.

You can toggle visibility and customise the appearance and the hint texts on the button.

Usage

<script type="text/javascript" src="https://speechly.github.io/browser-ui/latest/push-to-talk-button.js"></script>

<push-to-talk-button
  appid="YOUR_APP_ID_FROM_SPEECHLY_DASHBOARD"
  placement="bottom"
  hide="false"
  capturekey=" "
  intro="Push to talk"
  size="80px" >
</push-to-talk-button>

Attributes

  • appid - Speechly App id to connect to.
  • poweron - Optional string "true" | "false". Shows poweron state. If false, recording can immediately start but will first press will cause a system permission prompt. Default: "false"
  • capturekey - Optional string (of length 1). Defines a keyboard hotkey that with control listening on/off. Default: undefined. Recommendation: Space (" ")
  • size - Optional string (CSS). Defines the button frame width and height. Default: "6rem"
  • hide - Optional "false" | "true". Default: "false"
  • placement - Optional "bottom" turns on internal placement without PushToTalkContainer CSS class
  • voffset - Optional CSS string. Vertical distance from viewport edge. Only effective when using placement.
  • intro - Optional string containing a short usage introduction. Displayed when the component is first displayed. Default: "Push to talk". Set to "" to disable.
  • hint - Optional string containing a short usage hint. Displayed on a short tap. Default: "Push to talk". Set to "" to disable.
  • fontsize - Optional CSS string for hint text. Default: "1.2rem"
  • showtime - Optional number in ms. Visibility duration for intro and hint callouts. Default: "5000" (ms)
  • textcolor - Optional string (CSS color) for hint text. Default: "#ffffff"
  • backgroundcolor - Optional string (CSS color) for hint text background. Default: "#202020"
  • gradientstop1 - Optional string (CSS color). Default: "#15e8b5"
  • gradientstop2 - Optional string (CSS color). Default: "#4fa1f9"

Events emitted

  • holdstart - CustomEvent triggered upon hold start
  • holdend - CustomEvent triggered upon hold end. event.detail.timeMs contains hold time in ms.
  • speechsegment - CustomEvent triggered when speech-to-text segment changes. Segment available as the event.details property.
  • starting - CustomEvent triggered on initialization start
  • initialized - CustomEvent triggered on initialization end. details: {success: true | false, appId: string, status: "Ready" | "Failed" | "NoBrowserSupport" | "NoAudioConsent"}

Window messages sent (postMessage)

  • {type: "speechsegment", segment: Segment} - Broadcasts new segment when an update is available
  • {type: "speechstate", state: ClientState} - Broadcasts state changes. Refer to browser-client documentation for values.
  • {type: "holdstart"} - Broadcasted upon hold start
  • {type: "holdend"} - Broadcasted upon hold end
  • {type: "initialized", success: true | false, appId: string, status: "Ready" | "Failed" | "NoBrowserSupport" | "NoAudioConsent"} - Broadcasted on initialization end.

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

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

...
<SpeechProvider appId="YOUR_APP_ID_FROM_SPEECHLY_DASHBOARD">
  <PushToTalkButton
    placement="bottom"
    hide="false"
    captureKey=" "
    intro="Push to talk"
    size="80px" >
  </PushToTalkButton>
</<SpeechProvider>
...

Properties

NameTypeDescription
backgroundColor?stringOptional string (CSS color) for hint text background. Default: “#202020”
captureKey?stringKeyboard key to use for controlling the button. Passing e.g. (a spacebar) will mean that holding down the spacebar key will key the button pressed.
fontSize?stringOptional CSS string for hint text. Default: “1.2rem”
gradientStops?string[]Colours of the gradient around the button. Valid input is an array of two hex colour codes, e.g. ['#fff', '#000'].
hide?booleanOptional boolean. Default: false
hint?stringOptional string containing a short usage hint. Displayed on a short tap. Default: “Push to talk”. Set to "" to disable.
intro?stringOptional string containing a short usage introduction. Displayed when the component is first displayed. Default: “Push to talk”. Set to "" to disable.
placement?stringOptional “bottom” string turns on internal placement without any CSS positioning.
powerOn?booleanOptional boolean. Shows poweron state. If false, recording can immediately start but will first press will cause a system permission prompt. Default: false
showTime?numberOptional number in ms. Visibility duration for intro and hint callouts. Default: “5000” (ms)
size?stringThe size of the button, as CSS (e.g. 5rem).
textColor?stringOptional string (CSS color) for hint text. Default: “#ffffff”

Button placement options

  • Place the button close to the bottom-center of the viewport (fixed) to indicate app-wide speech control. Use placement=“bottom” for this option.
  • Place the button close to a group of components if speech input only controls a few input fields.
  • Place the button close to an input field if speech input only controls that component (e.g. text in a search box)

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