Push-To-Talk Button

<script type="text/javascript" src="https://unpkg.com/@speechly/browser-ui/core/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.
• projectid - Optional Speechly Project id to connect to. Allows changing App id on the fly within the same project.
• loginurl - Optional alternative url to use for Speechly login.
• apiurl - Optional alternative url for Speechly API.
• capturekey - Optional string (of length 1). Defines a keyboard hotkey that with control listening on/off. Default: undefined. Recommendation: Space (" “)
• poweron - Optional string “auto”|“true”|“false”. If “true”, first button press sends a “poweron” message instead of initializing Speechly. This allows displaying a welcome screen using Intro Popup or a custom implementation. “auto” setting tries to detect presence of Intro Popup in DOM and use poweron if found. Default: “auto”
• hide - Optional “false” | “true”. Default: “false”

Attributes for styling

• placement - Optional “bottom” turns on internal placement without PushToTalkContainer CSS class
• size - Optional string (CSS). Defines the button frame width and height. Default: “88px”
• voffset - Optional CSS string. Vertical distance from viewport edge. Only effective when using placement.
• backgroundcolor - Optional string (CSS color) for button background. Default: “#ffffff”.
• iconcolor - Optional string (CSS color) for button icon. Default: “#000000”.
• gradientstop1 - Optional string (CSS color) for border color. Default: “#15e8b5”.
• gradientstop2 - Optional string (CSS color) for border color. Default: “#4fa1f9”
• fxgradientstop1 - Optional string (CSS color). Default: gradientstop1
• fxgradientstop2 - Optional string (CSS color). Default: gradientstop2
• 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.

Attributes for tap and hold behaviour

• taptotalktime - Optional time in milliseconds to listen after tap. Set to 0 to disable tap-to-talk. Default: “8000” (ms)
• silencetohanguptime - Optional milliseconds of silence to listen before hangup. Only used in tap-to-talk mode. Default: “1000” (ms)
• holdscale - Optional scale for button size when held down. Relative to size. Default: “1.35”.
• borderscale - Optional scale for button size when held down. Relative to button radius. Default: “0.06”.
• iconsize - Optional string (CSS dimension) for icon size. Relative to size. Default: “60%”.
• fxsize - Optional string (CSS dimension) for button hold fx size. Relative to size. Default: “250%”.

Attributes for usage hints

• 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.
• showtime - Optional time in milliseconds. Visibility duration for intro and hint callouts. Default: “5000” (ms)
• fontsize - Optional CSS string for hint text. Default: “1.2rem”
• textcolor - Optional string (CSS color) for hint text. Default: “#ffffff”
• hintbackgroundcolor - Optional string (CSS color) for hint text background. Default: “#202020” (attribute name changed from backgroundcolor)
• hintxalign - Optional string (CSS percentage). Default: “50%”
• hintwidth - Optional string (CSS dimension). Default: “auto”

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.detail property.
• starting - CustomEvent triggered on initialization start
• initialized - CustomEvent triggered on initialization end. event.detail: {success: true | false, appId: string, state: ClientState.Connected|Failed|NoBrowserSupport|NoAudioConsent}
• startcontext - CustomEvent triggered on just before starting listening. Allows changing appid to redirect audio to an alternative voice configuration.
• stopcontext - CustomEvent triggered on just after stopping listening.

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: "poweron"} - Broadcasted on button initial button press when poweron=“true”

Window messages listened

• {type: "showhint", hint: string} - Shows a custom hint using the call-out on the button.