vuetify3-audio-player

vuetify3-audio-player

A beautiful, modern, and fully customizable audio player for Vue 3 & Vuetify 3.

🚀 Live Playground

Try all features live in the /playground folder or online demo. All props, color options, and variants are interactive.

Features

• 🎵 Vue 3 + Vuetify 3: Seamless integration with the latest Vue ecosystem.
• 🎨 Modern, Responsive UI: Looks great on all devices, supports dark mode.
• ⚡ Live Playground: Try all props and see live code updates in the playground.
• 🧩 All Props Documented: Every prop, event, and icon is documented and demoed.
• 🖌️ Customizable Colors & Icons: Choose from Vuetify theme colors and set your own icons.
• 🏷️ Minimal & Flat Modes: Compact/minimal UI and flat card support.
• 🔁 Loop, Download, Playback Speed: All the controls you expect.
• ♿ Accessibility: Keyboard navigation, aria-labels, and focus states.
• 🚀 Performance Optimized: Fast, efficient, and production-ready.
• 📦 NPM & GitHub: npm | GitHub

Installation

npm install vuetify3-audio-player --save

Usage

import VuetifyAudio from "vuetify3-audio-player";
export default {
  components: { VuetifyAudio },
  data: () => ({
    file: "http://www.hochmuth.com/mp3/Boccherini_Concerto_478-1.mp3",
  }),
};

<vuetify-audio
  :file="file"
  color="primary"
  :downloadable="true"
  :minimal="false"
  :autoPlay="false"
  :flat="false"
  :playbackSpeed="false"
  :loopable="false"
  :ended="onEnded"
  :canPlay="onCanPlay"
  playIcon="mdi-play"
  pauseIcon="mdi-pause"
  stopIcon="mdi-stop"
  refreshIcon="mdi-refresh"
  downloadIcon="mdi-download"
  volumeHighIcon="mdi-volume-high"
  volumeMuteIcon="mdi-volume-mute"
  variant="default"
/>

Props

Prop	Type	Default	Description
file	String	null	Audio file URL (required)
color	String	null	Vuetify color for controls
downloadable	Boolean	false	Show download button
minimal	Boolean	false	Minimal UI mode
autoPlay	Boolean	false	Autoplay on load
flat	Boolean	false	Flat card style
playbackSpeed	Boolean	false	Show playback speed button (user can change speed)
loopable	Boolean	false	Show repeat button and allow looping (user can toggle repeat)
ended	Function	() => {}	Callback when audio ends (event handler)
canPlay	Function	() => {}	Callback when audio can play (event handler)
playIcon	String	"mdi-play"	Icon for play button (Material Design Icon name)
pauseIcon	String	"mdi-pause"	Icon for pause button (Material Design Icon name)
stopIcon	String	"mdi-stop"	Icon for stop button (Material Design Icon name)
refreshIcon	String	"mdi-refresh"	Icon for refresh/reload button (Material Design Icon name)
downloadIcon	String	"mdi-download"	Icon for download button (Material Design Icon name)
volumeHighIcon	String	"mdi-volume-high"	Icon for volume high (Material Design Icon name)
volumeMuteIcon	String	"mdi-volume-mute"	Icon for volume mute (Material Design Icon name)
variant	String	"default"	Player style variant (default, modern, tonal)

License

MIT