A Vue Hook Composable For Playing Sound Effects

Use sound is a lightweight Vue hook tool for playing sound effects on the app, based on the vue composition API and Howler.js.

play sound javascript, javascript play sound onclick, vue play sound onclick, javascript play sound from url, use sound hook

👂 Lets your website communicate using 2 human senses instead of 1
🔥 Built with Vue Composition API
✅ Supports Vue 2 & 3 using vue-demi
🚚 Supports Nuxt using nuxt-use-sound
⚡️ <1kb bytes (gzip) in your bundle! ~10kb loaded async.
✨ Built with TypeScript
🗣 Uses a powerful, battle-tested audio utility: Howler.js

How to make use of it:

Install and download:

# Yarn
$ yarn add @vueuse/sound

# NPM
$ npm i @vueuse/sound

1. Import the audio link file and the sound effects 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 button to play sound effects.

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

3. The options are available.

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

Vue Hook For Playing Sound Effects Plugin/Github