useSound 🔊
a custom React hook for sound effects, music, and all things web audio
here's a link to the repo if you want to play with the instrument code
a little bit about me...
I like making generative music - writing rules & procedures to determine musical elements, instead of writing them explicitly - in Ableton Live, a powerful and creative digital audio workstation.
In Ableton Live, I can use "MIDI Devices" to modify a static, one-note input MIDI signal into melodies, rhythmic patterns, chords, arpeggios, and more. These MIDI devices control musical elements like pitch, rhythm, scale, velocity, note length, delay, and chance, with a musician-friendly UI more similar to a physical effects pedal than a scripting terminal.
Check out the generative music I make at masonlynass.bandcamp.com
import useSound and audio assets
declare variables with array destructuring
In this example, [soundHorn] is a variable which plays a goal horn we've passed down as a prop - then that variable is accessed inside an onClick event handler to play the goal horn.
In my sumo website, sound variables are defined on the App level, then passed down as props to various components that use them. When a user submits a team they drafted, tachiai() plays the [tachiai] sound.
check it out for yourself at icehonky.net & fantasysumo.net
Instead of importing sounds individually, you can use "sprites" to extract multiple samples from the same audio file
8 voice Drum Machine
click on the buttons to hear each sound
then use "1, 2, 3, 4, q, w, e, & r" keys on the keyboard to finger drum!
clap
rack tom
floor tom
hi hat
kick
snare
ride
crash
Random note generator
When calling useSound, you can pass options like "playbackRate," "volume," "interrupt," and "sprite" as a second argument:
