Bar Visualizer

A dynamic audio visualization component for voice agents and media. Supports live media streams or simulated demo states.

Installation

npx raya-ui@latest add bar-visualizer

File Structure

your-project

components

bar-visualizer

BarVisualizer.vue

API Reference

Props

state

AgentState

Current interaction state. Accepts 'speaking', 'listening', 'thinking', 'connecting', 'initializing'.

barCount

number

15

The total number of vertical bars to render in the visualization.

demo

boolean

false

If true, simulates audio visualization using CSS animations without requiring a real audio stream.

mediaStream

MediaStream | null

null

The actual Web Audio API stream to hook into for live visualization.

minHeight

number

20

The minimum height percentage of the bars when at rest.

maxHeight

number

100

The maximum height percentage the bars can reach during peak audio.

Settings

Agent State

Bar Count20

Min Height (%)20%

Max Height (%)100%

source-code.vue

<script setup lang="ts">
import { BarVisualizer } from '@/components/ui/bar-visualizer'
</script>

<template>
  <BarVisualizer
    state="speaking"
    :bar-count="20"
    demo
    class="w-full h-32 bg-zinc-900 rounded-lg p-4"
  />
</template>