Monday, 10 February 2014

Make your app voice interactive!

Hello all,

Today I want to talk about speech synthesis APIs in HTML5 which helps you to listen to your application. Currently implemented by a very few browsers such as Chrome, Chromium(version 33 onwards on both web and mobile), Safari web and mobile on iOS7. You can download chromium33 here.

Speech synthesis API

Copy paste following code to your favorite editor and save it as an HTML and open it in the browser installed earlier.


<html>
    <head>
        <script>
        window.onload = function() {
            if(!window.speechSynthesis) {
                document.body.innerHTML = "Your app is mute. Sorry";
            }
            document.getElementById("donebtn").addEventListener("click", read, false);
            document.getElementById("clearbtn").addEventListener("click", clear, false);
        };
        function read(){
            var usermsg = document.querySelector("#usermsg").value;
            var msg = new SpeechSynthesisUtterance(usermsg);
            speechSynthesis.speak(msg);
            console.log(speechSynthesis.speaking);
            setTimeout(function(){
                console.log(speechSynthesis.speaking);
            }, 2000);
            document.querySelector("#results").innerHTML = "Your app can speak. Great!";
        }
        function clear(){
            document.querySelector("#results").innerHTML = "";
            document.querySelector("#usermsg").value = "";
        }
        </script>
        <style>
            .blueborder{
                color: red;
                border: 3px solid blue;
                width: 50%;
                height: 20%;
            }
        </style>
    </head>
    <body>
        <fieldset>
            <input type="text" id="usermsg" placeholder="type something here" class="blueborder">
            </input>
            <button id="donebtn">Done</button>
            <button id="clearbtn">Clear</button>
        </fieldset>
        <div id="results">
        </div>
    </body>
</html>

Hope you enjoyed. Cheers!

No comments:

Post a Comment