speedtyper.dev icon indicating copy to clipboard operation
speedtyper.dev copied to clipboard

Add typewriter sound effect

Open Ceridan opened this issue 9 months ago • 1 comments

Overview

Add sound effects during typing: typewriter sound on correct symbols and error sound when the incorrect key was pressed. Sound provides additional feedback to the user and can improve the overall experience. I made it an opt-in feature in settings.

See the demo for more details: speedtyper_dev_enable_sound.webm (make sure to turn on the sound on your device before watching the video).

References

Packages added:

  • https://github.com/joshwcomeau/use-sound - to handle audio files.
  • https://v4.webpack.js.org/loaders/file-loader/ - to copy sound files during the build.

The following free audio samples were used to make sounds (I extracted a fraction of the original audio):

  • https://pixabay.com/sound-effects/type-writing-6834/ - correct key press (typewriter sound).
  • https://pixabay.com/sound-effects/dramatic-guitar-140614/ - incorrect key press.

Closes #178

Ceridan avatar May 11 '24 22:05 Ceridan

I am not proficient in React, so I am happy to improve the code based on your feedback.

Ceridan avatar May 11 '24 23:05 Ceridan