Vue BarVisualizer

Vue 3 BarVisualizer component. Visualizes audio levels as animated bars and supports agent state-driven highlight animations. No TailwindCSS required.

Install

Build locally and add as a file dependency (or publish to your registry):

cd vue-components
pnpm install
pnpm build

Then in your app package.json:

{
  "dependencies": {
    "@livekit-vue/vue-bar-visualizer": "file:../vue-components"
  }
}

Usage

Basic usage with a MediaStreamTrack:

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { BarVisualizer } from "@livekit-vue/vue-bar-visualizer";

const micTrack = ref<MediaStreamTrack | null>(null);

onMounted(async () => {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  micTrack.value = stream.getAudioTracks()[0] ?? null;
});
</script>

<template>
  <BarVisualizer :track="micTrack" state="listening" :bar-count="15" />
  <!-- Place inside a container with a defined height. Default is 5rem. -->
</template>

Global install (plugin)

// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import { VueBarVisualizer } from "@livekit-vue/vue-bar-visualizer";

createApp(App).use(VueBarVisualizer).mount("#app");

Using a MediaStream:

<BarVisualizer :track="myStream" state="speaking" />

Custom bar template via slot:

<BarVisualizer :track="micTrack">
  <template #bar="{ highlighted, index, style }">
    <div :style="{
      ...style,
      width: '0.25rem',
      borderRadius: '0.25rem',
      backgroundColor: highlighted ? 'var(--lk-fg, #0ea5e9)' : 'var(--lk-va-bg, #94a3b8)',
      transition: 'height 150ms ease-out, background-color 150ms ease-out'
    }" />
  </template>
  <!-- Each bar also gets data-lk-highlighted and data-lk-bar-index attributes -->
  <!-- And uses CSS variables --lk-va-bg and --lk-fg by default -->
  <!-- Default container: flex layout, 0.25rem gap, 5rem height -->
  <!-- Default bar: 0.25rem width, rounded, background uses CSS vars -->
  <!-- When highlighted adds class lk-highlighted and bg var --lk-fg -->
  <!-- Provide your own #bar slot to fully customize markup -->
  
</BarVisualizer>

Props

• state?: 'connecting' | 'initializing' | 'listening' | 'thinking' | 'speaking'
• barCount?: number (default 15)
• track?: MediaStreamTrack | MediaStream | null
• options?: { minHeight?: number; maxHeight?: number } heights in percent (0-100)

Notes

• Requires browser environment with WebAudio API.
• Customize colors via CSS variables on a container:

  .my-container {
    --lk-va-bg: #94a3b8;
    --lk-fg: #0ea5e9;
  }