"Think you're escaping and run into yourself. Longest way round is the shortest way home."

James Joyce Ulysses

Code Snippets


Snippet Description

This is a modified version of Wes Bos' JavaScript 30 Drum Machine.

Press the keys (e.g. "1", "2", "3") listed in the pink bars beneath each block-letter to play a Christmas sound effect and trigger a CSS transformation! There's a really clever use of data-attributes going on underneath the hood that stitches everything together.

Oh, and don't forget to tune into Jon Solomon's annual 25-hour holiday marathon on WPRBXmas this coming Christmas Eve at 5:00pm EST!

All sound effects were downloaded from freesound.org.

Snippet Use Case

While tweaking Wes' tutorial to create a sound maker for my MARATHON CHRISTMAS side project, I quickly discovered I needed to extend his use of event listeners.

In Wes' implementation, the addition & removal of classes on a given div whenever a sound was played was handled entirely via key-driven events. This worked fine when the sounds being sampled were extremely short, but longer samples resulted in a sub-par user experience. I rewrote the underlying code so that a given div's class was removed after an audio element's sound had finished playing.

M 1
E 2
R 3
R 4
Y 5
C 6
H 7
R 8
I 9
S 0
T .
M ,
A ;
S [
! ]

You're currently viewing the mobile version of my homepage. That's totally fine, but you should seriously considering viewing this site on a larger screen if you want the full "larrymg.me" experience!