Skip to content
A Vue audio player base on Vuetify UI framework:
Branch: master
Clone or download
wilsonwu Merge pull request #1 from chamerling/infinite-duration
Infinite duration fix on Chrome
Latest commit 990d155 Aug 1, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore remove controls Jun 13, 2017 Create Jun 12, 2017 Update Jan 25, 2018
index.js add audio player v0.0.1 Jun 12, 2017
package.json add canplay callback support Jun 15, 2017


Downloads Version License

Vue.js sound audio player base on Vuetify UI framework. Covers audio-tag API and adds more.



Use npm: npm install vuetify-audio --save


At first make sure your project is Vue project, and has Vuetify as UI framework:

  1. Install Vuetify:
npm install vuetify --save-dev
  1. Add Vuetify to app.js or main.js:
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';


Add below code into your <script>:

import VuetifyAudio from 'vuetify-audio';

export default {
    data() {
        return {
            file: '',
    components: {
        'vuetify-audio': VuetifyAudio
    // If you want to use ended callback add below code
    methods: {
        audioFinish () {
            console.log('You see this means audio finish.');

And below code in the <template>:

<vuetify-audio :file="file" :ended="audioFinish"></vuetify-audio>


  • file (String): Set audio file for the audio player
  • ended (Function): Set callback function name after audio finish
  • canPlay (Function): Set callback function name when audio ready for playing

Known Issues

  1. Audio play pregress bar can't support drag, only support click.


  • Create online demo
  • Create npm install
  • Add customize styles for component
  • Add event for end audio



You can’t perform that action at this time.