Skip to content

wilsonwu/vuetify-audio

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

54 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vuetify-audio

Downloads Version License

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
  1. 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 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

  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