Virtual Talking Keyboard With jQuery And ResponsiveVoice

A jQuery 'Talking Keyboard' plugin used to create a virtual keyboard with a standard QWERTY layout on the webpage that has the ability to make the keyboard "speak" character by character as typing. Heavily based on the ResponsiveVoice.JS to provide the text-to-speech functionality.

How to use it:

1. Load the needed jQuery and ResponsiveVoice JavaScript libraries in your html page.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/responsivevoice.js"></script>

2. Download the plugin and load the JavaScript file talking_keyboard.js after jQuery library.

<script src="talking_keyboard.js"></script>

3. Add keyboard buttons to the webpage as this:

<div class="keyboard">
  <div class="row">
    <div class="twelve columns">
      <button class="keyboard-key" id="key-1">1</button>
      <button class="keyboard-key" id="key-2">2</button>
      <button class="keyboard-key" id="key-3">3</button>
      <button class="keyboard-key" id="key-4">4</button>
      <button class="keyboard-key" id="key-5">5</button>
      <button class="keyboard-key" id="key-6">6</button>
      <button class="keyboard-key" id="key-7">7</button>
      <button class="keyboard-key" id="key-8">8</button>
      <button class="keyboard-key" id="key-9">9</button>
      <button class="keyboard-key" id="key-0">0</button>
    </div>
  </div>


  <div class="row">
    <div class="twelve columns">
      <button class="keyboard-key" id="key-Q">Q</button>
      <button class="keyboard-key" id="key-W">W</button>
      <button class="keyboard-key" id="key-E">E</button>
      <button class="keyboard-key" id="key-R">R</button>
      <button class="keyboard-key" id="key-T">T</button>
      <button class="keyboard-key" id="key-Y">Y</button>
      <button class="keyboard-key" id="key-U">U</button>
      <button class="keyboard-key" id="key-I">I</button>
      <button class="keyboard-key" id="key-O">O</button>
      <button class="keyboard-key" id="key-P">P</button>
    </div>
</div>

  <div class="row">
    <div class="twelve columns">
      <button class="keyboard-key" id="key-A">A</button>
      <button class="keyboard-key" id="key-S">S</button>
      <button class="keyboard-key" id="key-D">D</button>
      <button class="keyboard-key" id="key-F">F</button>
      <button class="keyboard-key" id="key-G">G</button>
      <button class="keyboard-key" id="key-H">H</button>
      <button class="keyboard-key" id="key-J">J</button>
      <button class="keyboard-key" id="key-K">K</button>
      <button class="keyboard-key" id="key-L">L</button>
    </div>
  </div>

  <div class="row">
    <div class="twelve columns">
        <button class="keyboard-key" id="key-Z">Z</button>
        <button class="keyboard-key" id="key-X">X</button>
        <button class="keyboard-key" id="key-C">C</button>
        <button class="keyboard-key" id="key-V">V</button>
        <button class="keyboard-key" id="key-B">B</button>
        <button class="keyboard-key" id="key-N">N</button>
        <button class="keyboard-key" id="key-M">M</button>
    </div>
  </div>
</div>

4. Feel free to style the virtual keyboard in the CSS.

button.keyboard-key { ... }

button.keyboard-key:active {
  ...
}

/* The active-style class is used by jQuery
   to simulate CSS's ":active" pseudo-class.
*/
button.active-style {
  ...
}

---

This awesome jQuery plugin is developed by ajgabz. For more Advanced Usages, please check the demo page or visit the official website.