voice-recorder-vue

A Vue 3 component library for voice recording with real-time audio visualization. This library provides both low-level composables and high-level components for building voice recording applications.

Demo

Live audio visualization with configurable bars and real-time frequency analysis

Features

• 🎤 Real-time Audio Visualization: Animated frequency bars with smooth rendering
• 🔊 Speech-optimized: Focuses on speech frequency range (300-3400 Hz) with logarithmic scaling
• 📱 Responsive: High-DPI display support with automatic canvas scaling
• 🎨 Customizable: Configurable dimensions and styling
• 🛡️ Fallback Support: Demo mode when microphone access is denied
• 🧩 Composable Architecture: Use the useVisualizer composable directly or the AudioVisualizer component

Installation

npm install @panfriebe/voice-recorder-vue
# or
pnpm add @panfriebe/voice-recorder-vue
# or
yarn add @panfriebe/voice-recorder-vue

Quick Start

Using the AudioVisualizer Component

<script setup>
import { AudioVisualizer } from '@panfriebe/voice-recorder-vue'
</script>

<template>
  <AudioVisualizer
    :width="400"
    :height="120"
    :auto-start="false"
  />
</template>

Using the useVisualizer Composable

<script setup>
import { ref, onMounted } from 'vue'
import { useVisualizer } from '@panfriebe/voice-recorder-vue'

const canvas = ref(null)
let audioContext = null
let analyser = null
let dataArray = null

// Your audio data source
function getFrequencies() {
  if (analyser && dataArray) {
    analyser.getByteFrequencyData(dataArray)
    return Array.from(dataArray)
  }
  return []
}

function getMeta() {
  return {
    sampleRate: audioContext?.sampleRate || 48000,
    fftSize: analyser?.fftSize || 1024
  }
}

const { start, stop } = useVisualizer(canvas, getFrequencies, getMeta)

onMounted(async () => {
  // Setup your audio context and analyser
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
  audioContext = new AudioContext()
  analyser = audioContext.createAnalyser()
  analyser.fftSize = 1024

  const source = audioContext.createMediaStreamSource(stream)
  source.connect(analyser)
  dataArray = new Uint8Array(analyser.frequencyBinCount)

  start()
})
</script>

<template>
  <canvas ref="canvas" width="400" height="120" />
</template>

API Reference

AudioVisualizer Component

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | width | number | 400 | Canvas width in pixels | | height | number | 100 | Canvas height in pixels | | autoStart | boolean | false | Automatically start recording on mount |

useVisualizer Composable

function useVisualizer(
  canvas: Ref<HTMLCanvasElement | null>,
  getFrequencies: () => number[],
  getMeta?: () => { sampleRate: number; fftSize: number }
): {
  start: () => void
  stop: () => void
}

Parameters

• canvas: Vue ref to the canvas element
• getFrequencies: Function that returns frequency data array (0-255 values)
• getMeta: Optional function that returns audio metadata

Returns

• start(): Start the visualization
• stop(): Stop the visualization and cleanup

Development

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Run tests
pnpm test

Browser Support

• Modern browsers with Web Audio API support
• Canvas 2D rendering context
• Optional: ResizeObserver for responsive canvas sizing

License

MIT