// the find
staskobzar/vue-audio-visual
VueJS audio visualization components
A Vue 3 component library for audio visualization using the Web Audio API. It gives you five canvas-based visualizer types — bars, waveform, circle, line, and live media stream — each exposed both as a component and as a composable. Aimed at anyone building a music player or podcast UI in Vue who doesn't want to wire up AnalyserNode from scratch.
The composable-first design is the right call: you get the visualization logic as a plain function that accepts canvas and audio refs, so you can integrate it into your own component without inheriting the library's DOM structure. The waveform component pre-fetches the full audio file and renders a clickable scrubber, which is the hard part most people give up on. Test coverage is solid — composables, components, and prop parsing all have their own spec files with a real vitest setup. Active maintenance with a recent push date and a clean Vue 2/Vue 3 split means you won't get burned by a half-migrated codebase.
Canvas size is controlled by fixed numeric props with no responsive/fluid mode — you set `canv-width` and `canv-height` or accept whatever the defaults are, which means you'll write your own resize observer wrapper if you want the visualizer to fill a container. The `AVMedia` component bundles four different visualization types behind a single `type` string prop instead of exposing them as separate components, which makes tree-shaking harder and the API less obvious. The composable function signatures use a generic `T extends object` for props instead of typed interfaces, so you get no autocomplete or type errors when you pass the wrong prop names to `useAVBars`. No SSR story — the Web Audio API is browser-only and there's no guard or stub for server-side rendering, so Nuxt users will hit errors on first render.