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