jQuery plugin (as well as Wordpress plugin) that makes it possible to scroll and navigate your website by talking to the browser
JavaScript PHP
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
includes
static
README.md
jquery-speech-interface.php
readme.txt
screenshot-1.jpg
screenshot-2.jpg

README.md

jQuery Speech Interface

This project contains a Wordpress plugin that makes it possible for your visitors to scroll and navigate your website by talking to the browser (english only). The idea is to give people with disabilities (that makes it difficult or impossible to use a mouse) a better website experience.

NOTICE! This plugin is mostly for fun and can't really be put into use since Chrome is the only browser implementing -webkit-speech at the moment. It's also not possible to trigger the speech input without clicking on the input field, which is in contradiction to the purpose of this plugin. But as soon as the browsers adds the event startSpeechInput to speech inputs this will be possible to achieve.

How does it work?

After that you've installed the plugin a dialog box will appear in the left corner of your website. In the dialog box there will be a small microphone-icon. Click on the icon and a recording will start (remember that this is only supported by Google Chrome at the moment).

Say one of the following commands and the magic will happen (you have to say it loud and clear, otherwise googles servers gets a bit muddle-headed).

  • "scroll down"
  • "scroll up"
  • "scroll" - Will trigger the last scroll command you said
  • "link X" - There will be a number in a gray circle beside every link on your page. You navigate to a link simply by saying "link" followed by the number.

Installation on Wordpress

All you have to do is to install plugin jQuery Speech Interface via the Wordpress repository and you're set to go!

Custom installation

This example requires that you have some prior knowledge about html and javascript coding. First of all upload the file /static/jquery.speechinterface.js to your web server. Add the following to the head section of your html document (you'll have to add the path to the script file your self).

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script src="[PATH-TO-SOME-DIRECTORY]jquery.speechinterface.js"></script>
<script>
jQuery(document).ready(function() {
  jQuery('body').speechInterface({
    debugMode : 2,
    scrollLength : jQuery(window).height() * 0.4,
  });
});
</script>

Optional configuration

  • debugMode (int) - Either 0,1,2 depending on how much debug info you want to be displayed
  • scrollLength (int) - How much you want the window to scroll each time the scroll command is invoked
  • posX (int) - Where you want the dialog box to appear on the X-axis (default is 15px)
  • posY (int) - Where you want the dialog box to appear on the Y-axis (default is 15px)
  • notSupportedMessage - The message you want to be displayed in browsers that doesn't support -webkit-speech