Vue-howler NPM

vue-howler

A Howler.js mixin for Vue 2 that makes it easy to create custom audio player components

Installation

$ npm install vue-howler

Usage

First create a component that uses the mixin

audio-player.vue

<script>
  import VueHowler from 'vue-howler'

  export default {
    mixins: [VueHowler]
  }
</script>

<template>
  <div>
    <span>Total duration: {{ duration }} seconds</span>
    <span>Progress: {{ (progress * 100) }}%</span>
    <button @click="togglePlayback">{{ playing ? 'Pause' : 'Play' }}</button>
    <button @click="stop">Stop</button>
  </div>
</template>

Then you can use that component in your templates

home.vue

<script>
  import AudioPlayer from './audio-player.vue'

  export default {
    components: {
      AudioPlayer
    },

    data () {
      return {
        audioSources: [
          "assets/audio/music.webm",
          "assets/audio/fallback.mp3",
          "assets/audio/fallback2.wav"
        ]
      }
    }
  }
</script>

<template>
  <div>
    <audio-player :sources="audioSources" :loop="true"></audio-player>
  </div>
</template>

API

Props

`sources`

Type: String[] - Required

An array of audio file urls

`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)