praveenrambalu/index.html

## index.html


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >

</head>

<body>
    <h4 align="center">Speech to text convertor in JS</h4>
    <div id="result"></div>
  <center><button onclick="startConverting();"><i class="fa fa-microphone"></i></button></center>
  </body>


## script.js
 var r = document.getElementById('result');

        function startConverting() {


            if ('webkitSpeechRecognition' in window) {
                var speechRecognizer = new webkitSpeechRecognition();
                speechRecognizer.continuous = true;
                speechRecognizer.inerimResults = true;
                speechRecognizer.lang = 'en-IN';
                speechRecognizer.start();
                var finalTranscripts = '';
                speechRecognizer.onresult = function(event) {
                    var interimTranscripts = '';
                    for (var i = event.resultIndex; i < event.results.length; i++) {
                        var transcript = event.results[i][0].transcript;
                        transcript.replace("\n", "<br>");
                        if (event.results[i].isFinal) {
                            finalTranscripts += transcript;
                        } else {
                            interimTranscripts += transcript;
                        }
                    }
                    r.innerHTML = finalTranscripts + '<span style="color:#999">' + interimTranscripts + '</span>';

                };
                speechRecognizer.onerror = function(event) {

                };
            } else {
                r.innerHTML = 'Your Browser is not supported.';
            }
        }

## speech-to-text-recognization.markdown

      
    Raw
  

              speech-to-text-recognization.markdown
            
          
    Speech to Text Recognization

A Pen by Praveenram Balachandran on CodePen.
License.

  
## style.css
  #result {
            height: 200px;
            border: 1px solid black;
            padding: 10px;
            line-height: 25px;
            position: relative;
        }

        button {
            padding: 10px;
            margin:  auto;
            top: 240px;
            position: absolute;
        }


	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >

	</head>

	<body>
	<h4 align="center">Speech to text convertor in JS</h4>
	<div id="result"></div>
	<center><button onclick="startConverting();"><i class="fa fa-microphone"></i></button></center>
	</body>
	var r = document.getElementById('result');

	function startConverting() {


	if ('webkitSpeechRecognition' in window) {
	var speechRecognizer = new webkitSpeechRecognition();
	speechRecognizer.continuous = true;
	speechRecognizer.inerimResults = true;
	speechRecognizer.lang = 'en-IN';
	speechRecognizer.start();
	var finalTranscripts = '';
	speechRecognizer.onresult = function(event) {
	var interimTranscripts = '';
	for (var i = event.resultIndex; i < event.results.length; i++) {
	var transcript = event.results[i][0].transcript;
	transcript.replace("\n", "<br>");
	if (event.results[i].isFinal) {
	finalTranscripts += transcript;
	} else {
	interimTranscripts += transcript;
	}
	}
	r.innerHTML = finalTranscripts + '<span style="color:#999">' + interimTranscripts + '</span>';

	};
	speechRecognizer.onerror = function(event) {

	};
	} else {
	r.innerHTML = 'Your Browser is not supported.';
	}
	}
	#result {
	height: 200px;
	border: 1px solid black;
	padding: 10px;
	line-height: 25px;
	position: relative;
	}

	button {
	padding: 10px;
	margin: auto;
	top: 240px;
	position: absolute;
	}