Last active
December 22, 2023 13:20
-
-
Save zerosonesfun/0c55d089fd5dc8f1100345b671a3e4b8 to your computer and use it in GitHub Desktop.
Typewriter sounds as you type
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head></head> | |
| <body> | |
| <textarea id="typewriter"></textarea> | |
| <label for="soundToggle">Sound</label> | |
| <input type="checkbox" id="soundToggle"> | |
| <script> | |
| const textarea = document.getElementById('typewriter'); | |
| const soundToggle = document.getElementById('soundToggle'); | |
| function createAudio(src) { | |
| return new Audio(src); | |
| } | |
| const typingSound = createAudio('typing-sound.mp3'); | |
| const deleteSound = createAudio('delete-sound.mp3'); | |
| const lineReturnSound = createAudio('line-return-sound.mp3'); | |
| let lastDeleteTime = 0; | |
| textarea.addEventListener('keydown', function (event) { | |
| const inputText = textarea.value; | |
| if (soundToggle.checked !== true) { | |
| return; // Sounds are turned off | |
| } | |
| if (event.key === ' ' || event.code === 'Space' || event.keyCode === 32) { | |
| return; // Skip spacebar entirely | |
| } | |
| if (event.key === 'Enter' || event.key === 'Return') { | |
| playSound(lineReturnSound, 0); // Play line return sound immediately | |
| } else if (event.key === 'Backspace' || event.key === 'Delete') { | |
| if (Date.now() - lastDeleteTime > 5000) { | |
| playSound(deleteSound, 0); | |
| lastDeleteTime = Date.now(); | |
| } | |
| } else { | |
| playSound(typingSound, 0); | |
| } | |
| }); | |
| function playSound(audio, delay) { | |
| setTimeout(function () { | |
| const soundInstance = createAudio(audio.src); | |
| soundInstance.play(); | |
| }, delay); | |
| } | |
| </script> | |
| <!--A SkyWolf creation // wilcosky.com/skywolf--> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment