# vue-audio-visual: Dynamic Audio Visualization Components for Vue.js

This repository profile is provided by osrepos.com, an open source repository discovery platform.

Source: osrepos.com
Repository profile: https://osrepos.com/repo/staskobzar-vue-audio-visual
Generated for open source discovery and AI-assisted research.

vue-audio-visual is a powerful Vue.js plugin offering a suite of HTML5 audio visualization components. Built with the Web Audio API, it enables developers to easily integrate dynamic and visually appealing audio spectrums, waveforms, and circular visualizers into their Vue applications. This library provides flexible components and composable functions for a seamless development experience.

GitHub: https://github.com/staskobzar/vue-audio-visual
OSRepos URL: https://osrepos.com/repo/staskobzar-vue-audio-visual

## Summary

vue-audio-visual is a powerful Vue.js plugin offering a suite of HTML5 audio visualization components. Built with the Web Audio API, it enables developers to easily integrate dynamic and visually appealing audio spectrums, waveforms, and circular visualizers into their Vue applications. This library provides flexible components and composable functions for a seamless development experience.

## Topics

- audio
- canvas
- http5-audio-api
- vue
- vuejs
- waveform
- typescript
- frontend

## Repository Information

Last analyzed by OSRepos: Sun Oct 12 2025 05:00:52 GMT+0100 (Western European Summer Time)
Detail views: 7
GitHub clicks: 2

## Safety Notice

OSRepos shares public repositories for knowledge and discovery only. Review source code, dependencies, licenses, and security implications before running or installing anything.

## Content

## Introduction

`vue-audio-visual` is an innovative Vue.js plugin designed to bring dynamic audio visualization to your web applications. Leveraging the power of the HTML5 Web Audio API, this library provides a collection of versatile Vue components that enable developers to effortlessly display audio spectrums, waveforms, and other engaging visual effects. It is fully compatible with Vue 3, with a specific version available for Vue 2 projects, ensuring broad applicability.

The plugin offers various components like `AvLine`, `AvBars`, `AvCircle`, `AvWaveform`, and `AvMedia`, each providing a unique way to visualize audio data. Whether you need a simple line graph, a complex bar spectrum, or an interactive waveform, `vue-audio-visual` has a component to fit your needs. You can explore working examples on the official <a href="https://staskobzar.github.io/vue-audio-visual/" target="_blank">DEMO page</a>.

## Installation

Getting started with `vue-audio-visual` is straightforward.

Install the package using npm:

bash
npm install --save vue-audio-visual


For Vue 2 projects, you should install version 2.5.1:

bash
npm i -S vue-audio-visual@2.5.1


After installation, you can register the plugin globally in your `main.js` file:

typescript
import { createApp } from "vue";
import App from "./App.vue";
import { AVPlugin } from "vue-audio-visual";

const app = createApp(App);
app.use(AVPlugin);

app.mount("#app");


Alternatively, you can import and use individual components as needed:

typescript
<script setup lang="ts">
import { AVWaveform } from 'vue-audio-visual'
</script>

<template>
  <AVWaveform src="http://foo.com/music.ogg" />
</template>


The plugin also provides composable functions for each component, offering greater control and flexibility by allowing direct access to audio and canvas element refs:

typescript
<script setup lang="ts">
import { ref } from 'vue'
import { useAVBars } from 'vue-audio-visual'

const player = ref(null)
const canvas = ref(null)
const mySource = "./symphony.mp3"

useAVBars(player, canvas, { src: mySource, canvHeight: 40, canvWidth: 200, barColor: 'lime' })
</script>

<template>
  <div>
    <audio ref="player" :src="mySource" controls />
    <canvas ref="canvas" />
  </div>
</template>


## Examples

Here are some examples of the visualization components provided by `vue-audio-visual`:

### AvLine

The `AvLine` component draws a continuous line graph representing the audio spectrum.

html
<av-line :line-width="2" line-color="lime" src="/static/music.mp3"></av-line>


### AvBars

The `AvBars` component displays an audio spectrum as a series of vertical bars, with customizable colors and cap effects.

html
<av-bars
  caps-color="#FFF"
  :bar-color="['#f00', '#ff0', '#0f0']"
  canv-fill-color="#000"
  :caps-height="2"
  src="/static/bach.mp3"
></av-bars>


### AvCircle

The `AvCircle` component renders a circular audio visualizer, often including playtime progress and text.

html
<av-circle
  :outline-width="0"
  :progress-width="5"
  :outline-meter-space="5"
  :playtime="true"
  playtime-font="18px Monaco"
  src="/static/bach.mp3"
></av-circle>


### AvWaveform

The `AvWaveform` component generates a clickable waveform of the audio, allowing users to seek through the track.

html
<av-waveform src="/static/bar.mp3"></av-waveform>


### AvMedia

The `AvMedia` component visualizes a `MediaStream` object, useful for microphone input or other live audio sources.

typescript
<script setup lang="ts">
import { AVMedia } from 'vue-audio-visual'
import { useUserMedia } from '@vueuse/core'
// ...
const { stream } = useUserMedia()
// ...
</script>

<template>
  <!-- ... -->
  <AVMedia :media="stream" type="circle" />
  <!-- ... -->
</template>


## Why Use It?

`vue-audio-visual` stands out as an excellent choice for several reasons:

*   **Ease of Integration**: Quickly add sophisticated audio visualizations to your Vue.js projects with minimal setup.
*   **Rich Component Library**: Offers a variety of pre-built components (`AvLine`, `AvBars`, `AvCircle`, `AvWaveform`, `AvMedia`) to suit different aesthetic and functional requirements.
*   **Modern Web API**: Built on the HTML5 Web Audio API, ensuring high performance and broad browser compatibility.
*   **Vue 3 & Vue 2 Support**: Provides compatibility for both major versions of Vue.js, making it adaptable for various projects.
*   **Composable Functions**: Offers a flexible API with composable functions, giving developers fine-grained control over audio and canvas elements.
*   **Customization**: Each component comes with extensive props for detailed customization of colors, sizes, and behaviors.

## Links

*   **GitHub Repository**: <a href="https://github.com/staskobzar/vue-audio-visual" target="_blank">staskobzar/vue-audio-visual</a>
*   **Demo Page**: <a href="https://staskobzar.github.io/vue-audio-visual/" target="_blank">Live Demo</a>
*   **npm Package**: <a href="https://www.npmjs.com/package/vue-audio-visual" target="_blank">vue-audio-visual on npm</a>