Professional Documents
Culture Documents
Use-Sound A React Hook That Lets You Play Sound Effects
Use-Sound A React Hook That Lets You Play Sound Effects
Josh Comeau
Maybe it's because I was an audio engineer, but I wish the web was
louder.
I know a bunch of folks will disagree, and for good reason! Sound on the
web has historically been used in annoying/awful ways:
Autoplaying videos �
However, I believe that this is the bathwater around a baby very much
worth saving. Sounds can accentuate user actions, emphasize feedback,
and add a bit of delight to an otherwise humdrum action. When done
tastefully, sound can make a product feel more tangible and real.
1 of 16 11/8/23, 16:08
use-sound | a React hook that lets you play sound effects https://www.joshwcomeau.com/react/announcing-use-...
This isn't a new idea: video games and mobile apps use sound all the
time. In fact, the web is the odd one out; most forms of digital media I
can think of uses sound.*
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. This tutorial gives a quick
look at what it can do, and shares additional tips and tricks for using
sound on the web.
If you're eager to start using the hook, you can hop straight to the Github page.
Overview
use-sound is a React hook that lets you play sound effects. Here's a
2 of 16 11/8/23, 16:08
use-sound | a React hook that lets you play sound effects https://www.joshwcomeau.com/react/announcing-use-...
typical example:
JSX
Check out the documentation for a comprehensive usage guide and API
reference.
3 of 16 11/8/23, 16:08
use-sound | a React hook that lets you play sound effects https://www.joshwcomeau.com/react/announcing-use-...
Getting started
Installation
The first thing we need to do is install the package, via Yarn or NPM:
BASH
Imports
This package exports a single default value: the useSound hook:
JS
You'll also need to import audio files to use with this hook.
4 of 16 11/8/23, 16:08
use-sound | a React hook that lets you play sound effects https://www.joshwcomeau.com/react/announcing-use-...
JS
If you're rolling your own Webpack config, you'll want to use file-loader
to treat .mp3 files as arbitrary files.
You can also refer to paths of files put in a public or static directory.
The demos on this page, for example, point to static files kept in a
publicly-accessible folder.
Installing dependencies and writing code is only half the story; we also
need to find audio samples!
Be prepared to do some digging. Many of the sounds are poorly recorded. This is
a diamond-in-the-rough, needle-in-the-haystack kind of situation.
Preparing sounds
5 of 16 11/8/23, 16:08
use-sound | a React hook that lets you play sound effects https://www.joshwcomeau.com/react/announcing-use-...
Like strings, sounds can be padded with empty space. You'll want to
trim it off, so that the effect is heard the moment you trigger the
sound.
You might want to tweak the volume of samples so that they're all
kept around the same level.
Why MP3?
Even as an advocate for sound on the web, I recognize that not all users
will appreciate it. And this goes beyond a subjective preference for
silence.
6 of 16 11/8/23, 16:08
use-sound | a React hook that lets you play sound effects https://www.joshwcomeau.com/react/announcing-use-...
People who are visually impaired use a screen reader to access the web *
. Screen readers are pieces of software that parse the document and
narrate its contents as sound. If we're loading our website full of sound
effects, these sounds might clash with the narration they depend on to
make sense of our site.
Conversely, deaf users will have no idea that sounds are being triggered,
as will folks who have muted their devices. For that reason, it's important
that critical information is never communicated exclusively by sound. If
you're using a sound effect to serve as confirmation for a user action, be
sure to also have a visual indication. Sites should remain 100% usable
without sound.
Recipes
Checkbox
I find this checkbox so satisfying. If you're using a mouse, try doing a
really quick click, and then adding a bit of a delay between mouse-down
and mouse-up.
7 of 16 11/8/23, 16:08
use-sound | a React hook that lets you play sound effects https://www.joshwcomeau.com/react/announcing-use-...
function Demo() {
const [isChecked, setIsChecked] = React.useState
false
);
return (
<Checkbox
name="demo-checkbox"
checked={isChecked}
size={24}
label="I agree to self-isolate"
onChange={() => setIsChecked(!isChecked)}
onMouseDown={playActive}
onMouseUp={() => {
I agree to self-isolate
8 of 16 11/8/23, 16:08
use-sound | a React hook that lets you play sound effects https://www.joshwcomeau.com/react/announcing-use-...
Interrupting sounds
Sometimes, you only want a sound to play while the user is interacting
with it. Notice how the following sample only plays while being hovered:
function Demo() {
// For fun, try swapping out 'rising-pops' with:
// - fanfare
// - dun-dun-dun
// - guitar-loop
const soundUrl = '/sounds/rising-pops.mp3';
return (
<Button
onMouseEnter={() => {
setIsHovering(true);
play();
}}
onMouseLeave={() => {
setIsHovering(false);
stop();
}}
9 of 16 11/8/23, 16:08
use-sound | a React hook that lets you play sound effects https://www.joshwcomeau.com/react/announcing-use-...
>
Rising pitch
A fun trick I use on the "Like" button is to pitch up a sound every time it
plays. Here's how that works:
function Demo() {
const soundUrl = '/sounds/glug-a.mp3';
return (
<Button onClick={handleClick}>
<span role="img" aria-label="Heart">
�
</span>
</Button>
10 of 16 11/8/23, 16:08
use-sound | a React hook that lets you play sound effects https://www.joshwcomeau.com/react/announcing-use-...
);
}
Play/pause button
Build the next Spotify with this razzle-dazzle play/pause button.
function Demo() {
const soundUrl = '/sounds/guitar-loop.mp3';
return (
<PlayButton
active={isPlaying}
size={60}
iconColor="var(--color-background)"
idleBackgroundColor="var(--color-text)"
activeBackgroundColor="var(--color-primary)
play={play}
stop={stop}
/>
);
}
11 of 16 11/8/23, 16:08
use-sound | a React hook that lets you play sound effects https://www.joshwcomeau.com/react/announcing-use-...
Sprites
If your component is going to use lots of sounds, it can be worthwhile to
use an audio sprite. A sprite is an audio file with many different sounds.
By combining them into a single file, it can be a bit nicer to work with,
plus you avoid many parallel HTTP requests. *
function Demo() {
const soundUrl = '/sounds/909-drums.mp3';
12 of 16 11/8/23, 16:08
use-sound | a React hook that lets you play sound effects https://www.joshwcomeau.com/react/announcing-use-...
return (
<>
<Button
aria-label="kick"
onMouseDown={() => play({ id: 'kick' })}
>
1 2 3
A million possibilities
The thing that strikes me about using audio on the web is that there is so
much under-explored territory. I've been experimenting with sound for a
while now, and I still feel like I'm just scratching the surface.
You've been given the tools to start experimenting, and I'd encourage
you to have some fun with this, and see where it takes you =)
13 of 16 11/8/23, 16:08
use-sound | a React hook that lets you play sound effects https://www.joshwcomeau.com/react/announcing-use-...
Share on Twitter
My latest thing
Over the past two years, I've been hard at work creating the ultimate
learning experience for React. I call it “The Joy of React”.
I've been building with React for over 8 years now, and I've learned a lot
about how to use it effectively. I absolutely love working with React; I've
tried just about every front-end framework under the sun, and nothing
14 of 16 11/8/23, 16:08
use-sound | a React hook that lets you play sound effects https://www.joshwcomeau.com/react/announcing-use-...
In “The Joy of React”, we'll build a mental model for how React really
works, digging into concepts like we have in this tutorial. Unlike the
posts on this blog, however, my courses use a “multi-modality”
approach, mixing written content like this with video content, exercises,
Subscribe
Josh Comeau
Tutorials Links
15 of 16 11/8/23, 16:08
use-sound | a React hook that lets you play sound effects https://www.joshwcomeau.com/react/announcing-use-...
16 of 16 11/8/23, 16:08