Package Exports

vuetify-audio

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vuetify-audio) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vuetify-audio

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:

Install Vuetify:

npm install vuetify --save-dev

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

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