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 usage, please go to the official website.

Related Posts

HStack-and-VStack-in-CSS

CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…

Floating-Whatsapp-Chat-Button

How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Data-Table-Generator-Tabulator

Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…

alert-confirm-prompt-attention-js

Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Bootstrap-4-Sidebar-Menu-Responsive-Template

Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…

Bootstrap-4-Toast-Notification-Plugin

Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…

Leave a Reply

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