Vue Hook For Playing Sound Effects – use-sound

Description:

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:

Vue Hook For Playing Sound Effects - use-sound

Changelog:

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: Tahul

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

Download Link: https://github.com/Tahul/vue-use-sound/archive/main.zip

Official Website: https://github.com/Tahul/vue-use-sound

Install & Download:

# Yarn
$ yarn add vue-use-sound

# NPM
$ npm i vue-use-sound

You Might Be Interested In:

Tags:

Add Comment