useSound – A React Hook for Sound Effects

Josh W. Comeau:

Because sound is used so rarely on the web, it can be quite impactful. It’s a bit of a secret weapon, and it can make a surprisingly big difference for the right kinds of projects!

To make it a bit easier to get started, I pulled out the hook I built for this blog, use-sound, and published it on NPM.

import useSound from 'use-sound';

import boopSfx from '../../sounds/boop.mp3';

const BoopButton = () => {
  const [play] = useSound(boopSfx);

  return <button onClick={play}>Boop!</button>;
};

Installation per NPM/Yarn.

yarn add use-sound

Built on top of the wonderful Howler.js

useSound – A React Hook for Sound Effects →
Beep Boop! Announcing “use-sound” →