vuetify-audio
vuetify-audio copied to clipboard
A Vue audio player base on Vuetify UI framework: https://wilsonwu.github.io/dist/index.html#/vuetifyaudio
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.
- Support disable the Vuetify Card style, and you can use this component in your own Vuetify Card of your page.
- You can set custom icons supported by vuetify v-icon component.
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) or override the icon attributes with some other supported by v-icon component.
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.
- playIcon (String) (Optional, default is mdi-play): Set the icon for play
- pauseIcon (String) (Optional, default is mdi-pause): Set the icon for pause
- stopIcon (String) (Optional, default is mdi-stop): Set the icon for stop
- refreshIcon (String) (Optional, default is mdi-refresh): Set the icon for refresh
- downloadIcon (String) (Optional, default is mdi-download): Set the icon for download
- volumeHighIcon (String) (Optional, default is mdi-volume-high): Set the icon for volume
- volumeMuteIcon (String) (Optional, default is mdi-volume-mute): Set the icon for mute
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~~
- ~~Add props for custom icons~~
License
MIT