A Vue composable for playing sound effects in web applications using Howler.js.
@vueuse/sound is a Vue composable that provides a simple, reactive way to play sound effects in Vue and Nuxt applications. It wraps the Howler.js audio library to offer features like volume control, playback rate adjustment, and audio sprites with minimal bundle impact. The composable solves the problem of integrating audio feedback into web interfaces without complex audio API boilerplate.
Vue and Nuxt developers who want to add sound effects, notifications, or audio feedback to their web applications, particularly those building interactive UIs, games, or immersive experiences.
Developers choose @vueuse/sound because it offers a Vue-native, composable API that is both lightweight and feature-rich, with built-in support for Vue 2, Vue 3, and Nuxt. Its reactive configuration and seamless Howler.js integration provide a robust audio solution without the overhead of manual audio handling.
🔊 A Vue composable for playing sound effects
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Adds only ~1kb gzip to your bundle with ~10kb loaded asynchronously, keeping initial load light as highlighted in the README.
Sound options like volume and playback rate are reactive; changes update in real-time, making it easy to tie audio behavior to UI state.
Built for Vue 2 and 3 using vue-demi, with a dedicated Nuxt module for seamless integration in Nuxt 2 and 3 projects, as documented.
Leverages the battle-tested Howler.js library, providing reliable cross-browser audio playback without reinventing the wheel.
Sounds may not play if triggered before the async Howler.js dependency loads, leading to silent failures in rare cases, as admitted in the README.
For Vite users, extra config is needed to exclude vue-demi from optimization, adding setup complexity that isn't auto-handled.
While powerful, it abstracts away the Web Audio API; developers needing direct access for advanced features must use escape hatches, which can be cumbersome.