For my poetry community website, I wanted the ability to turn on typewriter sounds while typing. The are a couple of pre-built solutions out there but I couldn’t get them to work. So, here’s my version of how to target a textarea and add typing sounds.

See the Pen Typewriter Sounds by zerosonesfun (@zerosonesfun) on CodePen.

There are three sounds which I felt was important for a more realistic typewriter experience. One sound for most of the keys (the main typing sound), one sound for deleting, and a sound for the enter/return key.

At one point while testing the delete sound was happening over and over again too many times so I put a line in there to stop playing the delete sound after so many times. This may or may not be needed.

Do typewriters make a sound when the spacebar is pressed? I don’t remember. I made it so that the spacebar is one key with no sound.

Leave a Reply

Your email address will not be published. Required fields are marked *

Billy Wilcosky