vuetify-audio
v0.3.3
Published
Vue.js audio files player with Vuetify UI framework
Downloads
1,974
Maintainers
Readme
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 Vuetify
as UI framework:
- Install Vuetify:
npm install vuetify --save-dev
- Add Vuetify to
app.js
ormain.js
:
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
You also can use Vue plugin to install Vuetify
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.
Known Issues
- Audio play pregress bar can't support drag, only support click.
ToDo
- ~~Create online demo~~
- ~~Create npm install~~
- ~~Add customize collor for component~~
- ~~Add event for end audio~~
- ~~Add auto play audio~~
- ~~Add downloadable property for audio file~~
- ~~Fully support dark mode~~
- ~~Add prop for Card flat~~
- Add increase or decrease volume of audio
License
MIT