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

License

MIT