Listening bar & popup

listens-listening-bar · listens-listening-popup@listenssoft/speechui-angular

Choose between a listening bar at the top of the page, or a compact floating popup. Both show the live transcript and a waveform that pulses to the engine's audio level.

listens-listening-bar

A full-width strip pinned to the top of the page, with the wave and the transcript.

listens-listening-popup

A compact capsule that floats over the page and widens to fit the transcript.

Try it

The bar is at the top of the page. Hold anywhere and watch the wave pulse as you speak. Tick the props to change it.

The bar is fixed at top: 0, so a header that is also fixed or sticky at top: 0 ends up underneath it. Set the header’s top to var(--listens-bar-height, 0px) instead. The bar publishes its current height in that variable, and 0px while it is hidden.

Loading the Angular kit…

Angular

Updates as you tick props

import { Component } from "@angular/core";import { ListensListeningBarComponent } from "@listenssoft/speechui-angular";
@Component({  selector: "demo-listening-bar",  imports: [ListensListeningBarComponent],  template: `    <listens-listening-bar [alwaysShow]="true" />  `,})export class DemoListeningBar {}

API reference

Angular inputs & outputs for @listenssoft/speechui-angular.

listens-listening-bar inputs

Input	Type	Default	Description
`waveColor`	`string`	`"#ff0000"`	Stroke color of the waveform.
`alwaysShow`	`boolean`	`true`	Keep the bar visible when idle. Set false to slide it away between utterances.
`maxWidth`	`number \| string`	—	Constrain the bar's width and center it.
`reserveSpace`	`boolean`	`true`	Render the in-flow spacer that pushes following siblings down. Set false when your content is positioned out of normal flow (e.g. Ionic's .ion-page) and offset your layout with the published --listens-bar-height CSS variable instead.
`priority`	`number`	`0`	The most recently mounted popup or bar will be shown. Set the priority to change this.

Styling hooks

CSS hooks

Hook	Type	Default	Description
`.listens-listening-bar`	`class`	—	Same classes and self-contained stylesheet as the React kit.
`--listens-bar-height`	`token`	—	Height variable for offsetting out-of-flow layouts (see reserveSpace).

Behavior notes

All frameworks: It is recommended to add a ListeningBar or ListeningPopup to your app to make the Listens experience more intuitive.
All frameworks: Only one bar or popup renders at a time. Every mounted bar and popup in the same Provider shares one stack: the most recently rendered will show, this can be changed by adjusting the priority in the Bar/Popup props.

Text

listens-text