Vue Hook For Playing Sound Effects – use-sound

use-sound is a lightweight Vue hook for playing sound effects on the app, based on Vue Composition API and Howler.js.

How to use it:

1. Import the use-sound hook and sound effect file as follows:

import useSound from 'vue-use-sound'
import buttonSfx from '/path/to/effect.mp3'

export default {
  setup() {
    const [play] = useSound(buttonSfx)
    return {
      play,
    }
  },
}

2. Enable a button to play the sound effect.

<button @click="play">Play a sound</button>

3. Available options.

export interface HookOptions {
  volume?: number
  playbackRate?: number
  interrupt?: boolean
  soundEnabled?: boolean
  sprite?: SpriteMap
  onload?: () => void
}
export interface PlayOptions {
  id?: number
  forceSoundEnabled?: boolean
  playbackRate?: number
}

Preview:

Changelog:

v2.0.0/1 (02/01/2023)

• fiv: HowlConstructor.value is not a constructor error

v1.1.7 (02/20/2021)

• package updated

v1.1.5 (02/20/2021)

• package updated

v1.1.3 (02/07/2021)

• package updated

v1.1.2 (01/13/2021)

• fix howler typings

v1.1.0 (01/12/2021)

• allow refs as volume & playbackRate parameters

v1.0.9 (01/10/2021)

• remove optional chaining

v1.0.5 (01/03/2021)

• update

v1.0.3 (01/02/2021)

• remove unnecessary dependency

Download Details:

Author: vueuse

Live Demo: https://vue-use-sound.netlify.app/

Download Link: https://github.com/vueuse/sound/archive/main.zip

Official Website: https://github.com/vueuse/sound

Install & Download:

# Yarn
$ yarn add @vueuse/sound

# NPM
$ npm i @vueuse/sound