HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Voice LevelView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA live level of a voice, drawn as a row of bars or as moving waves.ExperimentalSince 0.215.0FeedbackUsageimport'@fusion.dev/helix/voice-level'Preview
API ReferenceRoothelix-voice-levelA live level of a voice, drawn as a row of bars or as moving waves.
PropTypeDescriptionbandsstring|readonlynumber[]Default""How loud each frequency band is, from 0 to 1, lowest band first.fallbackLabelstringDefault"Voice level"The name where label is empty. Translate it with the rest of your
interface.labelstringDefault""The name read by screen readers, such as "Your voice". Defaults to
fallbackLabel.levelnumberDefault0How loud the voice is, from 0 for silence to 1.stillbooleanDefaultfalseDraws the readings as a still picture: each bar at its band and the waves
at one fixed moment, swung as far as level.variant"spectrum"|"waves"The drawing: a row of bars, one for each band, or three moving waves.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
PartDescriptioncanvasThe canvas the level is drawn on.
CSS PropertyDescription--voice-level-accent-colorThe color of the second wave. Defaults to the accent color.--voice-level-barsHow many bars the spectrum draws, from 3 to 96. Defaults to 24.--voice-level-block-sizeThe height. Defaults to the icon size for spectrum and the control size for waves.--voice-level-colorThe color of the center bars and the main wave. Defaults to the primary color.--voice-level-edge-colorThe color of the bars at either end. Defaults to --voice-level-color at 55 percent.--voice-level-inline-sizeThe width. Defaults to four times the height for spectrum and three times for waves.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionColors And BarsA spectrum of twelve bars in the success color, and waves in two colors of your own.PreviewA spectrum and waves, each drawn as a still picture of a steady level.ReadingsBoth drawings fed readings 30 times a second: a phrase, then a pause, so each settles at rest.