19 February 2016

How to Add Speech Recognition to your Website


Open the Google website on your desktop computer and you’ll find a little microphone icon embedded inside the search box. Click the icon, say something and your voice is quickly transcribed into words. Unlike earlier speech recognition products, you no longer have to train the browser to understand your speech and, for those who don’t know touch typing, speech is often a faster mode of input than the keyboard.

Sounds like magic, right? Well, did you know that you can also include similar speech recognition capabilities to your own website with a few lines of code. Visitors can search your website, or even fill forms, using just their voice. Both Google Chrome and Firefox browsers support the speech recognition API.

Web Speech Recognition

Before we dive into the actual implementation, let’s play with a working demo. If you are viewing this page inside Google Chrome (desktop or mobile), click the voice icon inside the search box and say a search query. You may have allow the browser to access your microphone. When you are done speaking, the search results page will open automatically.

Add Voice Recognition to your Website

The HTML5 Web Speech API has been around for few years now but it takes slightly more work now to include it in your website.

Earlier, you could add the attribute x-webkit-speech to any form input field and it would become voice capable. The x-webkit-speech attribute has however been deprecated and you are now required to use the JavaScript API to include speech recognition. Here’s the updated code:

<!-- CSS Styles -->
<style>
  .speech {border: 1px solid #DDD; width: 300px; padding: 0; margin: 0}
  .speech input {border: 0; width: 240px; display: inline-block; height: 30px;}
  .speech img {float: right; width: 40px }
</style>

<!-- Search Form -->
<form id="labnol" method="get" action="http://ift.tt/1gKlIhB;
  <div class="speech">
    <input type="text" name="q" id="transcript" placeholder="Speak" />
    <img onclick="startDictation()" src="//i.imgur.com/cHidSVu.gif" />
  </div>
</form>

<!-- HTML5 Speech Recognition API -->
<script>
  function startDictation() {

    if (window.hasOwnProperty('webkitSpeechRecognition')) {

      var recognition = new webkitSpeechRecognition();

      recognition.continuous = false;
      recognition.interimResults = false;

      recognition.lang = "en-US";
      recognition.start();

      recognition.onresult = function(e) {
        document.getElementById('transcript').value
                                 = e.results[0][0].transcript;
        recognition.stop();
        document.getElementById('labnol').submit();
      };

      recognition.onerror = function(e) {
        recognition.stop();
      }

    }
  }
</script>

We have the CSS to place the microphone image inside the input box, the form code containing the input button and the JavaScript that does all the heavy work.

When the user click the mic image inside the search box, the JavaScript checks if the user’s browser supports speech recognition. If so, it waits for the transcribed text to arrive from Google servers and then submits the form.

The Dictation App also uses the speech recognition API though it writes the transcribed text to textarea field instead of an input box.

Some notes:

  1. If the HTML form / search box is embedded inside an HTTPS website, the browser will not repeatedly ask for permission to use the microphone.
  2. You can change the value of the recognition.lang property from ‘en-US’ to another language (like hi-In for Hindi or fr-FR for Fran├žais). See the complete list of supported languages.

The story, How to Add Speech Recognition to your Website, was originally published at Digital Inspiration by Amit Agarwal on 19/02/2016 under Speech Recognition, Software.

18 February 2016

Export Google Fit Data


Google Takeout has recently added support for exporting Google Fit data. You'll be able to download some CSV and TCX files that include your activities and daly aggregations.

* TCX (Training Center XML) is a common file format for fitness activity data that can be imported to many fitness tracking tools such as Garmin Connect and Strava. By default, Fit samples location data with low accuracy and frequency to reduce device battery consumption. These Activities are exported into the Low Accuracy folder. Activities recorded with Fit's active mode will contain more detailed location paths and more accurate data.

* CSV files are easily read by spreadsheet software or parsed programmatically but may not be easy to import into fitness tracking software.




Gmailify


Gmail's app for Android is more than a mobile app for Gmail, it's also a general-purpose mail client. You can add IMAP, POP3 or Exchange accounts and use the Gmail app to read, compose and organize your mail. Now Google added the option to Gmailify your email accounts, which means bringing Gmail features without having to switch to a Gmail account.

"Gmailify links your existing account to Gmail so that you get all the bells and whistles — spam protection, inbox organization and even Google Now cards based on your mail — without having to leave your current address behind. All you need to do is open the Gmail app, sign in to your email account(s), and enable Gmailify," informs Google.


Which features are available? Spam protection, automatic categorization, labels, better search with support for advanced search operators, travel and hotel reservations appearing automatically in Google Now, better mobile notifications and all the other Gmail features.

How does it work? You can link your non-Gmail address (Yahoo Mail, Outlook.com, AOL Mail, etc.) to an existing Gmail account or to a new Gmail account. "When you sign in to the linked Gmail address, you'll see your messages from the other email provider in your mailbox. You'll be able to read, reply, and organize them just like you do in Gmail." The Gmail app keeps everything in sync, so a read email will be marked as read in the original account, archived messages will be added to a new Archive folder, while Gmail labels will be treated like folders.