• Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • Featured
    • C# Tutorials
      • LinQ Tutorials
      • Facebook C# API Tutorials
    • PHP Tutorials
      • CodeIgniter Tutorials
    • Amazon AWS Tutorials
  • Categories
    • Programming
    • Development
    • Database
    • Web Server
    • Source Control
    • Management
    • Project
  • About
  • Write
  • Contact

CodeSamplez.com

Programming, Web development, Cloud Technologies

You are here: Home / Programming / Getting Started With HTML5 Web Speech API

Getting Started With HTML5 Web Speech API

December 31, 2014 by Rana Ahsan 15 Comments

html5 web speech api

If you don’t know about it yet, the HTML5 web speech API specification is now in working condition on google chrome and partially in the apple safari browser(See the browser support status here: http://caniuse.com/web-speech). That means you can now develop voice-driven web applications. We can hope that other browsers will start supporting this very soon as well. In this tutorial, I will try to explain how we can start developing an application that uses this and also refer you to a small wrapper library with the easy-to-use abstraction that I wrote recently.

Voice To Text API:

We can alternatively mention it as ‘Speech Recognition API’ as well. What it does, is capture the user’s voice through the input system and convert it to text. So, there is a need for voice recognition technology here. This feature is currently supported only in the Google Chrome browser. By default, it uses google’s voice recognition service. Here is a code example of implementing it:

var recognizer = new webkitSpeechRecognition();
recognizer.lang = "en";
recognizer.onresult = function(event) {
    if (event.results.length > 0) {
        var result = event.results[event.results.length-1];
        if(result.isFinal) {
            console.log(result[0].transcript);
        }
    }
};
recognizer.start();Code language: JavaScript (javascript)

The above code snippet will request permission from the user to allow taking input through microphone access and then will capture the sound you talk, send it to an external service for recognition, and get the result back inside ‘onresult’ event handler. Thus, we will be able to see the output in the console window of the browser.

This class definition also exposes an optional ‘serviceURI’ property which you can use to define the service URL you like to use for voice recognition.

Text To Voice API:

Text-to-voice conversion is a simple way to play a given text in a robotic voice. Here is a simple code snippet for this:

var su = new SpeechSynthesisUtterance();
su.lang = "en";
su.text = "Hello World";
speechSynthesis.speak(su);Code language: JavaScript (javascript)

As you can see, it’s pretty much straightforward. We just need to pass the desired language and text to it, and it’s all set to play it.


Checkout The HTML5 Web Speech Demo!

The Wrapper Library And Usage Example:

As I already experienced, some steps are obvious and can be made simple with a simple wrapper. Thus, to make your life easier, I started a small JavaScript library to ease the use of this API. Here is the GitHub link:

https://github.com/ranacseruet/webspeech

It’s also registered as a bower package too! So, if you are using bower for front-end package management, you can simply run commands like:


$bower install webspeechCode language: PHP (php)

And you should be just fine!

Here is a very simple-to-use example:

<input id="text">
<button onclick="talk()">Talk It!</button>
<button onclick="listen()">Voice</button>
<script src="../bower_components/platform/platform.js"></script>
<script src="../src/webspeech.js"></script>
<script>
    var speaker = new webspeech.Speaker();
    var listener = new webspeech.Listener();
    function talk() {
        speaker.speak("en", document.getElementById("text").value);
    }

    function listen() {
        listener.listen("en", function(text) {
            document.getElementById("text").value = text;
        });
    }
</script>Code language: HTML, XML (xml)

Final Words:

Even on in chrome for windows, there is another issue, which is that it doesn’t support capturing voice continuously; instead, you will have to allow it on the browser every time you want to say something. However, there is a workaround to get rid of this annoying access allowance, which is to host your application on SSL. Then, only one-time access will work for all later times.

I hope this simple tutorial will help you to get started with HTML5 web speech API easily without much difficulty. In case you are facing some issues, please let me know via comments. Happy coding 🙂

Share If Liked

  • Click to share on Facebook (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Pinterest (Opens in new window)
  • Click to share on Reddit (Opens in new window)
  • Click to share on Tumblr (Opens in new window)
  • Click to share on Pocket (Opens in new window)

You may also like

Filed Under: Programming Tagged With: api, html5, javascript

About Rana Ahsan

Rana is a passionate software engineer/Technology Enthusiast.
Github: ranacseruet

Reader Interactions

Comments

  1. tung says

    August 2, 2015 at 4:03 am

    Useful. Thank you!

    Reply
  2. Girish says

    September 9, 2015 at 11:43 pm

    Hi
    From where can i download the ../bower_components/platform/platform.js file

    Reply
    • Md Ali Ahsan Rana says

      October 8, 2015 at 8:11 pm

      Please refer to ‘install’ section on the documention: https://github.com/ranacseruet/webspeech . Hope it helps.

      Reply
    • serdar says

      November 13, 2015 at 9:16 am

      hi , it was work thank you , vut how can ı change language? ı want to use turkish. this is posible can you help me how can ı do it.

      with the best regards.

      Reply
  3. Pelle B says

    September 30, 2015 at 5:12 pm

    Amazing! Do you know if it´s ok to use this Voice-To-Text-API for commercial use?

    Reply
    • Md Ali Ahsan Rana says

      October 8, 2015 at 8:17 pm

      Don’t have much idea. But if its web app and as browsers are starting to support it, I don’t see much of a problem in any way.

      Reply
    • cardoso says

      October 13, 2015 at 10:41 pm

      text-to-voice ok, but voice-to-text don’t work why?

      Reply
  4. Tomas Feliciano says

    November 12, 2015 at 3:11 am

    excuse me. but where is the ../bower_components/platform/platform.js file and also why the voice to text doesn’t work.

    Reply
    • Rajendra Jangir says

      December 14, 2016 at 7:27 am

      Hey Tomas,

      If you replace the bower_components to node_modules. It’ll work.

      Reply
  5. Nate says

    December 18, 2015 at 12:09 pm

    How can you implement this on visual studio, I am trying to create an asp.net mvc site that allows speech to text and then translation of that text. I need the speech recognition to be able to understand arabic and translate it to english.

    Reply
  6. s says

    April 6, 2016 at 12:29 pm

    The text to voice conversion works fine for me. But voice-text isn’t working. Please help me. Do I need upload the files to webserver?

    Reply
  7. Ali Sounblé says

    April 9, 2017 at 6:04 am

    Hello Sir,

    i need to use the web API speech to text converter and insert it in my matlab script, how can copy the converted voice data i mean the text to a separated text file?

    please advise.

    thanks in advance

    Reply
  8. achilles ram says

    April 26, 2017 at 1:55 pm

    is not working for telugu script?? why could you please explian???

    Reply
  9. Tcharles says

    May 10, 2017 at 5:34 am

    Dear Mr Md Ali Ahsan Rana

    About your article bellow, I think it’s great. I’m a student, and I really like this part of the computer science. I wonder if you can help me with an issue?

    Talk It!
    Voice
    http://../bower_components/platform/platform.js
    http://../src/webspeech.js

    var speaker = new webspeech.Speaker();
    var listener = new webspeech.Listener();
    function talk() {
    speaker.speak(“en”, document.getElementById(“text”).value);
    }

    function listen() {
    listener.listen(“en”, function(text) {
    document.getElementById(“text”).value = text;
    });
    }

    How can I do, in the article above, to store “text” in a variable?
    I wish I could use this variable later, for another purpose.
    Your command line:

    Speaker.speak (“en”, document.getElementById (“text”).

    Just get the id = “text” value, and use spearker.speak. However, once this line has been made, I no longer have access to this value.

    I would like to be able to store the “text” in a variable and display it on the screen to verify that it was actually stored. Can you help?

    tank you,

    Tcharles

    Reply
  10. Muthukaliswaran says

    March 9, 2019 at 12:58 pm

    Iam using four text boxes in my html code and i want the html5 web speech api to read all the four text box value, but it reads only the last text textbox value. Can you help me! what goes wrong?

    Reply

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 3,774 other subscribers

Follow Us

  • Twitter
  • Facebook

Top Posts & Pages

  • How To Work With JSON In Node.js / JavaScript
    How To Work With JSON In Node.js / JavaScript
  • PHP HTML5 Video Streaming Tutorial
    PHP HTML5 Video Streaming Tutorial
  • How To Work With C# Serial Port Communication
    How To Work With C# Serial Port Communication
  • Facebook C# API Tutorials
    Facebook C# API Tutorials
  • Using Supervisord Web Interface And Plugin
    Using Supervisord Web Interface And Plugin
  • LinQ Query With Like Operator
    LinQ Query With Like Operator
  • Get Facebook C# Api Access Token
    Get Facebook C# Api Access Token
  • Getting Started With UDP Programming in Java
    Getting Started With UDP Programming in Java
  • How To Use Hotkeys/Keyboard Events In WPF Application Using C#
    How To Use Hotkeys/Keyboard Events In WPF Application Using C#
  • Control HTML5 Audio With Jquery
    Control HTML5 Audio With Jquery

Recent Posts

  • Building Auth With JWT – Part 2
  • Building Auth With JWT – Part 1
  • Document Your REST API Like A Pro
  • Understanding Golang Error Handling
  • Web Application Case Studies You Must Read

Tags

.net angularjs apache api audio auth authenticatin aws c# cloud server codeigniter deployment docker doctrine facebook git github golang htaccess html5 http javascript jwt linq mysql nodejs oop performance php phpmyadmin plugin process python regular expression scalability server smarty socket.io tfs tips unit-test utility web application wordpress wpf

Footer

Archives

Follow Us

  • Twitter
  • Facebook

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 3,774 other subscribers

Copyright © 2023