Can voice input be added to my web form?

October 13th, 2017 by Heather Maloney

power-of-voice-newsletter
Given the recent proliferation of ads about Google Home, it’s now common knowledge that you can easily talk to electronic devices and instruct them to do things such as search the web, play your favourite tune, give you the weather forecast, call a friend, or tell you the time of your first appointment on a particular day. Google Now is the technology that enables voice control of Google and Android devices, and Siri powers voice control on Apple devices. Windows 10 provided Cortana to do the same.

When you are using a smartphone to interact with a form on a web page, then you can usually fill in a form using voice … how easy or hard that is depends on your device. On an iPhone (and an iPad) when you bring up the keyboard in a form, there’s an additional ‘microphone’ icon that you simply need to tap in order to speak your entry. If you are using an Android Samsung Galaxy phone, you can switch your entry from keyboard to voice by swiping down from the top of the screen and choosing Change Keyboard, and then choosing Google Voice … yes, that’s 3 steps :-( .

When it comes to using a PC or Mac, filling in a form usually relies on typing. Now that I am getting used to talking to electronic devices, I find myself looking for more ways that I can use my voice to control the device rather than having to type everything. Talking, even for me as a very fast touch-typist, is quicker than typing. Plus, speech control enables you to control your device when you need to be using it hands-free.

What about my web form?
In answer to the question posed by this blog article, yes! voice input can be added to your web form even when you are entering text on a PC or a Mac. To demonstrate, we’ve added a very simple voice entry capability to the enquiry form on the Contactpoint home page. Please note; this example only works in the Chrome web browser, and of course you must have a microphone on your PC or Mac in order to speak to fill out the form. To use the voice input:

  1. click or press on the microphone icon beside a field
  2. click to Allow access to the microphone (you will only need to do this the first time)
  3. talk to complete the field!

As you are speaking you will see that there’s a red recording icon pulsing in the browser tab. When you stop talking, the recording will also stop, and then what you said will appear in the box.

From a programming point of view, there are several ways to implement voice input into a web form. The example on the Contactpoint home page uses a very simple method involving Javascript and the webkitSpeechRecognition which is an API for Google Chrome, giving the browser access (after the user has specifically allowed it) to the microphone and then handling voice input very nicely. Google’s team has spent many years refining speech recognition, and the webkit gives you quick and free access to their powerful functionality.

Other Javascript libraries have been developed to enable much more sophistication in the manner in which you can use voice to interact with a web form. Annyang is a great example, whereby specific parts of your web form can have tailored voice interactions enabled so that whatever you say has context e.g. choosing from a drop down list in a form will know about the allowed options, and match the voice input with one or more of those options. Due to the additional sophistication, there’s obviously more effort involved in using this library. Another benefit is that Annyang functionality works in any web browser.

If you would like to improve the usability of your web forms by enabling speech entry, feel free to get in touch!

Handy Hints for voice entry of text:
If you speak your text message without including punctuation, paragraphs and the like, it can be a lot harder for the recipient to understand your message. But have no fear, the following list will have your test messages reading just like you typed it!
“full stop” – if you pause and then say “full stop” Google Now and Siri will type in a ‘.’
“exclamation mark” – if you say “exclamation mark” Google Now and Siri will type in a ‘!’
“question mark”- if you say “question mark” Google Now and Siri will type in a ‘?’
“new line” – if you pause and say “new line” Google Now and Siri will move the cursor down to the next line.
“comma” – if you pause and say “comma” Google Now and Siri will type in a ‘,’

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Leave a Reply

Subscribe to our monthly

Contact Point Email Newsletter

Each email newsletter is filled with technology updates and great ideas to help your business grow.

To subscribe, simply fill in your details below: