Vuetify-audio NPM

vuetify-audio

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

Features

Support most of audio play in this component.
You can set the color you want for all component buttons.
Support download the audio file.
After audio playing finished or before start the playing, you can do something.
Support Dark mode of Vuetify.
Support auto play, but if user didn't interact with the document first, the audio can't be played.
Support turn on and off audio download button.

Demo

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

Installation

Use npm: npm install vuetify-audio --save

Prepare

At first make sure your project is Vue project, and has jstify as UI framework: 1. 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);

You also can use Vue plugin to install jstify by only one line command:

vue add vuetify

Node: Make sure you are using the default Vuetify iconfont (mdi).

Usage

Add below code into your <script>:

export default {
    components: {
        VuetifyAudio: () => import('vuetify-audio'),
    },
    data: () => ({
        file: 'http://www.hochmuth.com/mp3/Boccherini_Concerto_478-1.mp3',
    }),
}

And below code in the <template>:

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

Attributes

file (String) (Required): Set audio file for the audio player
ended (Function) (Optional): Set callback function name after audio finish
canPlay (Function) (Optional): Set callback function name when audio ready for playing
color (String) (Optional): Set all component buttons color
autoPlay (Boolean) (Optional, default is false): Add it to make the audio auto play, but in some web browsers maybe failed, because some browsers need user active in the page first then allow sound auto play.
downloadable (Boolean) (Optional, default is false): Add it to let the audio file can be downloaded.
flat (Boolean) (Optional, default is false): When set to true, make the Vuetify Card style to flat, that you can combine other information/image/data with this control in your page.