Skip to content
A Vue audio player base on Vuetify UI framework: https://wilsonwu.github.io/dist/index.html#/vuetifyaudio
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
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore remove controls Jun 13, 2017
License.md Create License.md Jun 12, 2017
README.md Update README.md Jan 25, 2018
index.js add audio player v0.0.1 Jun 12, 2017
package.json add canplay callback support Jun 15, 2017

README.md

vuetify-audio

Downloads Version License

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

Demo

https://wilsonwu.github.io/dist/index.html#/vuetifyaudio

Installation

Use npm: npm install vuetify-audio --save

Usage

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';

Vue.use(Vuetify);

Add below code into your <script>:

import VuetifyAudio from 'vuetify-audio';

export default {
    data() {
        return {
            file: 'http://www.noiseaddicts.com/samples_1w72b820/290.mp3',
        };
    },
    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>

Attributes

  • 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.

ToDo

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

License

MIT

You can’t perform that action at this time.