Press "Enter" to skip to content

Virtual Keyboard Typing Sound Built With Pure Javascript

A virtual keyboard is a multi-language keyboard with sound effects while typing.

virtual keyboard download, how to make keyboard sound when typing, how to change the sound of your keyboard, on screen keyboard shortcut

🛠 Functionality

The virtual keyboard supports features such as:

  • writing by clicking on the letters
  • highlighting letters while writing
  • change languages (ru-en)
  • change record
  • audio input
  • sound while typing

How to make use of it:

1. Download the required material icons.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

2. Load the virtual keyboard’s JavaScript and CSS files.

<link rel="stylesheet" href="css/style.css">
<script defer src="js/script.js"></script>

3. Add the sound effect to the keyboard wrapper.

<div class="wrapper">
  <audio src="sound/click.mp3"></audio>
</div>

4. Add more languages to the virtual keyboard.

keyLayoutRus: [
 "ё", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "=", "backspace",
 "Tab", "й", "ц", "у", "к", "е", "н", "г", "ш", "щ", "з", "х", "ъ", '\\',
 "caps", "ф", "ы", "в", "а", "п", "р", "о", "л", "д", "ж", "э", "enter",
 "r. shift", "я", "ч", "с", "м", "и", "т", "ь", "б", "ю", ".", "l. shift",
 "lang", "", "", "space", "", "", "", ""
],
keyLayoutShiftRus: [
 "Ё", "!", '"', "№", ";", "%", ":", "?", "*", "(", ")", "_", "+", "backspace",
 "Tab", "Й", "Ц", "У", "К", "Е", "Н", "Г", "Ш", "Щ", "З", "Х", "Ъ", '/',
 "caps", "Ф", "Ы", "В", "А", "П", "Р", "О", "Л", "Д", "Ж", 'Э', "enter",
 "r. shift", "Я", "Ч", "С", "М", "И", "Т", "Ь", "Б", "Ю", ",", "l. shift",
 "space"
]

Virtual Keyboard With Typing Sound, Virtual keyboard Plugin/Github


See Demo And Download

Official Website(mykkarp): Click Here

This superior jQuery/javascript plugin is developed by mykkarp. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

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