vuetify-audio

vuetify-audio

An audio player component for Vue 3 and Vuetify 4. It supports playback, seeking, volume control, muting, downloads, autoplay, custom icons, and Vuetify themes.

Compatibility

Installation

npm install vuetify-audio vue@^3.5 vuetify@^4 @mdi/font

Configure Vuetify in your application entry point:

import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import 'vuetify/styles'
import '@mdi/font/css/materialdesignicons.css'
import App from './App.vue'

const app = createApp(App)
const vuetify = createVuetify()

app.use(vuetify).mount('#app')

Usage

<script setup>
import VuetifyAudio from 'vuetify-audio'

const file = 'https://example.com/audio.mp3'

function handleEnded () {
    console.log('Playback finished')
}
</script>

<template>
    <VuetifyAudio
        :file="file"
        color="success"
        downloadable
        @ended="handleEnded"
    />
</template>

Props

Use kebab-case for multi-word props in templates, for example auto-play, play-icon, and can-play.

Events

Component methods

A component template ref exposes play(), pause(), stop(), mute(), reload(), and download().

License

MIT