autoPlay audio reactjs
IntroductionMaybe it's because I was an audio engineer, but I wish the web was louder. Show
I know a bunch of folks will disagree, and for good reason! Sound on the web has historically been used in annoying/awful ways:
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. 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.* When I built this blog, I wanted to experiment with this. Many UI controls make little sounds when they're interacted with. Here's a quick selection from this site: "Like" this post 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. This tutorial gives a quick look at what it can do, and shares additional tips and tricks for using sound on the web. Straight to the docs?If you're eager to start using the hook, you can hop straight to the Github page. Link to this headingOverviewuse-sound is a React hook that lets you play sound effects. Here's a typical example: jsx It adds ~1kb (gzip) to your bundle, though it does asynchronously load a 10kb third-party dependency, Howler. It offers a bunch of niceies out of the box, including:
Check out the documentation for a comprehensive usage guide and API reference. Link to this headingGetting startedLink to this headingInstallationThe first thing we need to do is install the package, via Yarn or NPM: bash Link to this headingImportsThis package exports a single default value: the useSound hook: js You'll also need to import audio files to use with this hook. If you're using something like create-react-app/Gatsby, you should be able to import MP3 files the same way you import other forms of media like images: 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. Link to this headingFinding and prepping soundsInstalling dependencies and writing code is only half the story; we also need to find audio samples! My favourite resource is freesound.org. Almost all of the sound effects used in this blog come from that resource. It's a large index of Creative Commons Zero licensed sounds. You do need to sign up for an account to download files, but everything is free. 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.
|