Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wilsonwu/vuetify-audio
A Vue audio player base on Vuetify UI framework: https://wilsonwu.github.io/dist/index.html#/vuetifyaudio
https://github.com/wilsonwu/vuetify-audio
audio mp3 player vue vuejs2 vuetify
Last synced: 3 days ago
JSON representation
A Vue audio player base on Vuetify UI framework: https://wilsonwu.github.io/dist/index.html#/vuetifyaudio
- Host: GitHub
- URL: https://github.com/wilsonwu/vuetify-audio
- Owner: wilsonwu
- License: mit
- Created: 2017-06-12T16:37:49.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-03-12T14:39:49.000Z (10 months ago)
- Last Synced: 2024-12-29T15:09:40.028Z (10 days ago)
- Topics: audio, mp3, player, vue, vuejs2, vuetify
- Language: Vue
- Homepage:
- Size: 26.4 KB
- Stars: 140
- Watchers: 2
- Forks: 32
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: License.md
Awesome Lists containing this project
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.
- 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:
1. Install Vuetify:
```
npm install vuetify --save-dev
```
2. Add Vuetify to ```app.js``` or ```main.js```:
```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 ``````:
```js
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>```:
```html
<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
1. 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