Virtual Keyboard With Typing Sound

Preview:

Description:

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

How to use it:

1. Load the needed 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. That’s it.

<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"
]