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

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 DEMO page.

Installation

Getting started with vue-audio-visual is straightforward.

Install the package using npm:

npm install --save vue-audio-visual

For Vue 2 projects, you should install version 2.5.1:

npm i -S vue-audio-visual@2.5.1

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

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:

<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:

<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.

<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.

<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.

<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.

<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.

<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: staskobzar/vue-audio-visual
• Demo Page: Live Demo
• npm Package: vue-audio-visual on npm