Add Voice Response to an HTML page

399
December 15, 2016, at 2:43 PM

This is for a mobile only site:

I want to have a button on my page, when pressed the user can speak into their phone and when they finish talking a random mp3 file is triggered. Is this possible in JQuery?

Answer 1

This page demonstrates how you can do it.

http://www.phpied.com/x-webkit-speech-input-and-textareas/

Here are some other JS libraries specifically built for speech recognition.

http://jqueryhouse.com/5-voice-control-javascript-libraries-for-developers/

Answer 2

I used the Speech Recognition API once and used Annyang.

annyang is a tiny javascript library that lets your visitors control your site with voice commands. annyang supports multiple languages, has no dependencies, weighs just 3kb and is free to use.

It's as simple as:

<script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.0.0/annyang.min.js"></script>
<script>
if (annyang) {
  // set your commands here, as many as you need
  var commands = {
    'play mp3': function() {
        // change this to your own play MP3 method
        audioElement.play();
    },
    'put the kettle on': function() {
        console.log("You wish!");
    }
  };
  // add commands
  annyang.addCommands(commands);
  // start listening
  annyang.start();
}
</script>

Annyang is a library to make the setup of voice commands easy. However, it's not the quickest solution in the world, as I think (people with knowledge please chip in here) the library just calls and external service (Google, I think) and has to wait for response before running your code. It's only a second or two, but it's there.

The Speech Recognition API also requires permission to use user's the microphone. When the page loads, a little popup will appear automagically and asking permission. If a user chooses 'no', your speech feature won't work.

As I said earlier, browser support is looking rather dim, still. At the time of writing this, only Chrome, Chrome for Android and Opera can use it: caniuse.com/#feat=speech-recognition

It's a hell of a lot of fun playing with speech, so have a play regardless of your decison to use it or not. I used it alongside ResponsiveVoice to speak back to me. I built a little page that sits on my desktop and I can ask her things like "What is the weather?" and she reads my local weather report to me. I ask "What's the latest?" and she reads 10 news items from my local news agency's RSS feed. I also turned it into a speech calculator. So, yeah, have a play - one day it could be widely supported.

Read more here:

  • https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html
  • https://developers.google.com/web/updates/2013/01/Voice-Driven-Web-Apps-Introduction-to-the-Web-Speech-API?hl=en
  • http://shapeshed.com/html5-speech-recognition-api/
  • http://www.sitepoint.com/introducing-web-speech-api/
READ ALSO
color handler changing CSS

color handler changing CSS

I am trying to make it possible to change the background color of pull quotes by using the input type="color" tag in a formmy HTML is as follows

379
Add a class to a select options row if particular select option is selected

Add a class to a select options row if particular select option is selected

I have a whole bunch of rows with select items in themI want to apply a class to the row of the select item if a particular select option is selected

344
Properly renaming cloned inputs JQuery

Properly renaming cloned inputs JQuery

I'm attempting to craft my own cloning function that changes the name of cloned inputs so they can be collected by PHP

383
Custom Conditions To Filter Users In Jquery/Php/Mysql

Custom Conditions To Filter Users In Jquery/Php/Mysql

im building a tool to send out emails to my user baseI want to create a dialog where users can create clauses to filter the users they want to send to

446