speedtyper.dev
speedtyper.dev copied to clipboard
Add typewriter sound effect
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
I am not proficient in React, so I am happy to improve the code based on your feedback.