Easy to create custom audio player components for Vue

vue-audio-better

Easy to create custom audio player components for Vue.js.

Installation

npm install  vue-audio-better --save

Update

Add animation...

Setup

Bundler (Webpack, Rollup)

// in your entrypoint
import Vue from 'vue'
import VueAudio from 'vue-audio-better'

Vue.use(VueAudio)

Usage

Required Markup


  <vue-video
    :src="https://example.com/some_audio.mp3"
  ></vue-video>

Props

width

Type: Number - Default: 500

Audio width

source

Type: String - Required

An string of audio file url

html5

Type: Boolean - Default: false

Whether to force HTML5 Audio

loop

Type: Boolean - Default: false

Whether to start the playback again
automatically after it is done playing

preload

Type: Boolean - Default: true

Whether to start downloading the audio
file when the component is mounted

autoplay

Type: Boolean - Default: false

Whether to start the playback
when the component is mounted

formats

Type: String[] - Default: []

Howler.js automatically detects your file format from the extension,
but you may also specify a format in situations where extraction won't work
(such as with a SoundCloud stream)

xhrWithCredentials

Type: Boolean - Default: false

Whether to enable the withCredentials flag on XHR requests
used to fetch audio files when using Web Audio API (see reference)

Development

Build

Bundle the js to the dist folder:

npm run build

Acknowledgements

howler.js
vue-howler

GitHub