Navigate Drupal Sites with Your Voice

On the internet today, there is a wide range of website navigation tools. This is a direct result of the speed at which technology has evolved. From earlier input devices, such as punch cards, to present day computers, engineers and programmers have tried to improve the experience of information input - and they have succeeded. It seems like only yesterday that we could only read text in a browser and send information for data processing, but today’s websites are much more complex and sophisticated. Large software providers, such as Google, are constantly integrating the newest HTML5 technologies in consumer products. Among these new technologies is the Web Speech API.

Current Voice Recognition in Browsers

The Web Speech API allows web developers to provide highly accurate speech input in a web browser. This API provides the rights and tools developers need to control the browser's audio stream and convert it to text or other needed forms.

HTML5’s API implementation is a long and fully unfinished process, so Web Speech API support is no exception. A full list of supported browsers can be seen here, but, currently, this API is only fully supported on Chrome 40 and higher, for both desktop and mobile. It first appeared in the Google Chrome browser in 2013, and was written about in the official Chrome blog.

Mozilla has announced Web Speech API implementation in Firefox, but at this time, it is still incomplete. The current status of these efforts is reported by Mozilla developers athacks.mozilla.org.

Hopefully, support in other browsers will appear soon. You can read W3C specification here.

Why Voice Recognition?

• With speech recognition navigation, the developer can become a lot more productive - navigating to the home page or clearing the cache with a single voice command.
• For your end-user, Voice Recognition provides a better user experience, and accessibility to users with disabilities.
• Client-side use of Voice Recognition also makes mobile navigation much easier - no longer will end-users have to interact with small links and tiny buttons; they, too, can navigate with voice commands.

Module Features

The VoiceCommander module allows developers or users to navigate the entire menu system of a Drupal site, using the aforementioned Web Speech API. Features include:

• Navigate the site without using a mouse.
• Use the easy Pop-up launcher - just hit Ctrl+Alt to open. (Similar to Keyboard launchers such as Alfred.)
• Use voice commands on mobile devices to navigate.
• Select a customized list of commands from custom menus.

This API is also mindful of the privacy of its users. Before a website can access the user’s voice via microphone, the user must explicitly grant permission. Chrome's implementation of this security feature behaves differently based on the protocol used:

• http:// Asks for permission on each page load. Results are also returned significantly slower in HTTP.
• https:// Asks for permission once and remembers the choice.*

*At this time, it is better to use https:// when working with the Web Speech API.

Usage

Module installation

• Install as you would normally install a contributed Drupal module. See: http://www.drupal.org/project/voicecommanderfor further information.
• Run <drush vc> or manually install the “annyang" plugin (found on GitHub at https://github.com/Voicecommander/annyang/archive/master.zip) to your libraries folder (e.g. /sites/default/libraries).
• Check Drupal status reports to make sure no errors were reported.
• Go to /admin/config/user-interface/voice-commander and configure the VoiceCommander module.

Desktop Use

1. Choose the menu you would like to interact with.
2. Hold the Ctrl+Alt keys to start voice recognition.

Mobile Use

1. Choose the menu you would like to interact with.
2. Hold the left bottom corner of the mobile device to run voice commands.

Enjoy!

Additionally, users with Admin privileges can configure user permissions within the module settings, at /admin/config/user-interface/voice-commander.

• Set an Administrator command prefix, to navigate the admin menu.
• Select menus for which VoiceCommander can be used.
• Turn voice recognition on mobile devices on or off.

Default Commands

• Cache clear: 'drupal cache'
• Management menu: '[Administrator command prefix] [Management menu item]’
  • [Administrator command prefix] is an option that set at /admin/config/user-interface/voice-commander
  • [Management menu item] is an any menu link from management menu /admin/structure/menu/manage/management

Management menus use “default” for default navigation commands.

Navigation commands are subject to the existing permissions on a menu.

Plans for the Future

• Translations
• Settings to add custom JavaScript events
• Integration with Coffee module

Check out the VoiceCommander module page on Drupal.orgfor more information. Use the VoiceCommander module to improve your Drupal site, increase your site’s web accessibility, and get a much more awesome user experience. For more information on Section 508 and the federal web accessibility requirements check out http://www.section508.gov/.

Need help setting up Voice Recognition on your site? Contact uswe’ll help get you started.

 

Written by: Yuriy Kostin and Roman Yaremiy