vue-howler

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-howler
105130.7.06 years ago7 years agoMinified + gzip package size for vue-howler in KB

Readme

vue-howler Versionnpm
A Howler.jshowler mixinmixins 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)

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)

Data

playing

Type: Boolean
Whether audio is currently playing

muted

Type: Boolean
Whether the audio playback is muted

volume

Type: Number
The volume of the playback on a scale of 0 to 1

rate

Type: Number
The rate (speed) of the playback on a scale of 0.5 to 4

seek

Type: Number
The position of the playback in seconds

duration

Type: Number
The duration of the audio in seconds

progress

Type: Number
The progress of the playback on a scale of 0 to 1

Methods

play()

Start the playback

pause()

Pause the playback

togglePlayback()

Toggle playing or pausing the playback

stop()

Stop the playback (also resets the seek to 0)

mute()

Mute the playback

unmute()

Unmute the playback

toggleMute()

Toggle muting and unmuting the playback

setVolume(volume)

Set the volume of the playback (value is clamped between 0 and 1)

setRate(rate)

Set the rate (speed) of the playback (value is clamped between 0.5 and 4)

setSeek(seek)

Set the position of the playback (value is clamped between 0 and duration)

setProgress(progress)

Set the progress of the playback (value is clamped between 0 and 1)

License

MIT © Mick Dekkersmickdekkers-gh