Appearance

Vue Audio Visual Plugin ​

File Information ​

  • Path: app/plugins/vue-audio-visual.client.ts
  • Purpose: Configure Vue Audio Visual component for audio playback
  • Type: Client-only (runs only in browser)
  • Load Order: 9

Overview ​

The Vue Audio Visual plugin registers the Vue Audio Visual component library, which provides audio player components with visual waveform displays. This is used for playing audio files in the application.

Key Features ​

  1. Audio Player Component

    • Audio playback controls
    • Visual waveform display
    • Progress tracking
    • Volume control

  2. Visual Waveform

    • Real-time waveform visualization
    • Audio frequency visualization
    • Visual feedback during playback

  3. Vue Integration

    • Vue 3 compatible
    • Component-based
    • Reactive audio state

Code Structure ​

typescript
import { defineNuxtPlugin } from '#app'
import { AVPlugin } from 'vue-audio-visual'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(AVPlugin)
})

Usage Examples ​

Basic Audio Player ​

vue
<template>
  <vue-audio-visual
    :src="audioUrl"
    :can-play="true"
    @ended="onAudioEnded"
  />
</template>

<script setup>
const audioUrl = ref('/audio/file.mp3')

function onAudioEnded() {
  console.log('Audio playback ended')
}
</script>

Audio Player with Waveform ​

vue
<template>
  <vue-audio-visual
    :src="audioUrl"
    :can-play="true"
    :waveform="true"
    :waveform-color="'#6473FF'"
    @timeupdate="onTimeUpdate"
  />
</template>

<script setup>
const audioUrl = ref('/audio/file.mp3')

function onTimeUpdate(currentTime) {
  console.log('Current time:', currentTime)
}
</script>

Component Props ​

src ​

  • Type: string
  • Required: true
  • Purpose: Audio file URL

can-play ​

  • Type: boolean
  • Default: false
  • Purpose: Enable/disable playback

waveform ​

  • Type: boolean
  • Default: false
  • Purpose: Show waveform visualization

waveform-color ​

  • Type: string
  • Default: '#000000'
  • Purpose: Waveform color

autoplay ​

  • Type: boolean
  • Default: false
  • Purpose: Auto-play on load

loop ​

  • Type: boolean
  • Default: false
  • Purpose: Loop playback

volume ​

  • Type: number
  • Default: 1
  • Range: 0 to 1
  • Purpose: Audio volume

Component Events ​

@play ​

Emitted when playback starts.

@pause ​

Emitted when playback pauses.

@ended ​

Emitted when playback ends.

@timeupdate ​

Emitted during playback with current time.

Event Data:

typescript
{
  currentTime: number,
  duration: number
}

@volumechange ​

Emitted when volume changes.

Event Data:

typescript
{
  volume: number
}

Dependencies ​

  • vue-audio-visual - Vue audio player component library

Notes for Development ​

  • Client-only plugin (.client.ts suffix)
  • Registers plugin globally
  • Used for audio file playback
  • Provides visual waveform feedback
  • Supports all standard audio controls