Recipe

useSound() — Add small sounds effects to your page

Subtle sounds can bring a page to life

Jeroen Reumkens PRO

Playing a sound with React Hooks

1
import { useEffect, useRef } from "react";
2

3
type Settings = {
4
  volume?: number;
5
  playbackRate?: number;
6
};
7

8
export const useSound = (url: string, settings: Settings | undefined = {}) => {
9
  const audioRef = useRef<HTMLAudioElement | null>(null);
10

11
  useEffect(() => {
12
    // If the url changes, we clear the old instance,
13
    // this way a new Audio instance will be created on the next play
14
    audioRef.current = null;
15
  }, [url]);
16

17
  useEffect(() => {
18
    if (!audioRef.current) return;
19
    audioRef.current.volume = settings.volume || 1;
20
    audioRef.current.playbackRate = settings.playbackRate || 1;
21
  }, [settings]);
22

23
  const play = () => {
24
    if (typeof window === "undefined") return;
25

26
    if (!audioRef.current) {
27
      // We only created the Audio instance when play is fired,
28
      // this way we can avoid loading the sound if it's not used
29
      audioRef.current = new Audio(url);
30
    }
31

32
    try {
33
      audioRef.current.currentTime = 0;
34
      audioRef.current.play();
35
    } catch {}
36
  };
37

38
  return [play];
39
};

1
import { useSound } from "./use-sound";
2

3
export const App = () => {
4
  const [play1] = useSound("https://frontend.fyi/sfx/drum-1.mp3");
5
  const [play2] = useSound("https://frontend.fyi/sfx/drum-2.mp3");
6
  const [play3] = useSound("https://frontend.fyi/sfx/drum-3.mp3");
7
  const [play4] = useSound("https://frontend.fyi/sfx/drum-4.mp3");
8

9
  return (
10
    <div className="flex w-full items-center justify-center gap-2 text-3xl max-md:flex-col">
11
      <button
12
        className="aspect-square w-[100px] rounded-full bg-white/10 p-5 transition-[transform,background-color] hover:bg-white/30 active:scale-110"
13
        onClick={() => play1()}
14
      >
15
        🥁
16
      </button>
17
      <button
18
        className="aspect-square w-[100px] rounded-full bg-white/10 p-5 transition-[transform,background-color] hover:bg-white/30 active:scale-110"
19
        onClick={() => play2()}
20
      >
21
        🥁
22
      </button>
23
      <button
24
        className="aspect-square w-[100px] rounded-full bg-white/10 p-5 transition-[transform,background-color] hover:bg-white/30 active:scale-110"
25
        onClick={() => play3()}
26
      >
27
        🥁
28
      </button>
29
      <button
30
        className="aspect-square w-[100px] rounded-full bg-white/10 p-5 transition-[transform,background-color] hover:bg-white/30 active:scale-110"
31
        onClick={() => play4()}
32
      >
33
        🥁
34
      </button>
35
    </div>
36
  );
37
};

Subtle sounds can add some life to your page ✨. They make it feel more interactive and engaging.

After using Josh Comeau’s hook useSound for quite a while, I kept stumbling on a few issues with the package that didn’t get fixed. Probably because Josh also moved on from this library.

That is why I decided to write my own basic implementation of the useSound hook. The implementation is based around the standardized Web Audio API. That means we need pretty little code to make a small hook that plays a sound.

Using the hook

To use the hook, you need to pass the URL of the sound you want to play. Optionally you can pass an object with the volume and playback rate settings.

The hook then returns an array with a single function (for now 😉), which you can call to play the sound.

1
import { useSound } from "./useSound";
2

3
const MyComponent = () => {
4
  const [play] = useSound("/path/to/sound.mp3", {
5
    volume: 0.5,
6
    playbackRate: 1.5,
7
  });
8

9
  return <button onClick={play}>Play sound</button>;
10
};