Skip to content

How to Add Laughter to a GatsbyJS Site with use-sound

December 9th, 2020

olavea

I added laughter to a gatsbyjs site with use-sound by joshwcomeau. I love it! ❤️. Thanks Josh! Bottled Happiness is Benedicte @raae and Lillian (5.5 🦄 ) and my contribution to the Gatsby Silly Site Challenge.

Today’s question:

What should our user do to stop the laughter?

Benedicte Is live Coding the Answer

Take a look at Benedicte’s live coding here:

Take a look at the rest of the code on: https://github.com/raae/bottledhappiness

Here is what I did to use use-sound

yarn add use-sound

and

import useSound from 'use-sound'
import laugh1 from '../../laughs/534709__artymarce__childlaugh.mp3'

export default function Home() {
const [play, { stop }] = useSound(laugh1);
return (

...

<Button

onClick={play}

>

Bottle placeholder

</Button>

)

}

I found the actual laughter.mp3 at https://freesound.org/ after a tip by the same joshwcomeau Thanks again😺👍

Comments are closed.