alrra/index.html

## index.html
<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <title>Feature detection test for the Speech Recognition JavaScript API</title>
        <style>
            .no-js .content,
            .feature .no,
            .no-feature .yes,
            .no-feature .example {
                display: none;
            }

            input {
                width: 200px;
            }

            input[disabled] {
                cursor: default;
            }
        </style>
        <script>
            (function (window, undefined) {

                "use strict";

                var document = window.document,
                    docElement = document.documentElement,
                    SpeechRecognition = window.webkitSpeechRecognition ||
                                        window.mozSpeechRecognition ||
                                        window.msSpeechRecognition ||
                                        window.oSpeechRecognition ||
                                        window.SpeechRecognition;

                function addClass(className) {
                    docElement.className = docElement.className + ' ' + className;
                }

                docElement.className = docElement.className.replace(/(^|\s)no-js(\s|$)/, '$1js$2');

                if ( SpeechRecognition !== undefined ) {
                    addClass('feature');
                } else {
                    addClass('no-feature');
                }

            })(window);
        </script>
</head>
<body>
    <noscript>Please <a href="http://www.enable-javascript.com/" target="_blank">enable JavaScript</a>. Thank You! :D</noscript>
    <div class="content">
        <h1 class="yes">yap, it has support :D</h1>
        <h1 class="no">nope, it doesn't have support :(</h1>
        <div class="example">
            e.g.:
            <input type="search" id="speech-transcript">
            <input type="button" value="click me! :D" id="speech-btn">
        </div>
    </div>
    <script>
        (function (window, undefined) {

            "use strict";

            var speechBtn = document.getElementById('speech-btn'),
                SpeechRecognition = window.webkitSpeechRecognition ||
                                    window.mozSpeechRecognition ||
                                    window.msSpeechRecognition ||
                                    window.oSpeechRecognition ||
                                    window.SpeechRecognition,
                speechTranscript = document.getElementById('speech-transcript'),
                sr;

            if ( SpeechRecognition !== undefined ) {

                sr = new SpeechRecognition();

                speechBtn.addEventListener('click', function () {
                    sr.start();
                });

                sr.onaudiostart = function () {
                    speechBtn.setAttribute('disabled', 'disabled');
                    speechBtn.value = "don't be shy, start speaking!";
                };

                sr.onspeechstart = function () {
                    speechBtn.value = "I'm listening...";
                };

                sr.onspeechend = function () {
                    speechBtn.value = '...aand you stopped';
                };

                sr.onend = function () {
                    speechBtn.value = 'click me! :D';
                    speechBtn.removeAttribute('disabled');
                };

                sr.onresult = function (event) {
                    speechTranscript.value = event.results[0][0].transcript;
                };

            }

        })(window);
    </script>
</body>
</html>
	<!doctype html>
	<html class="no-js" lang="en">
	<head>
	<meta charset="utf-8">
	<title>Feature detection test for the Speech Recognition JavaScript API</title>
	<style>
	.no-js .content,
	.feature .no,
	.no-feature .yes,
	.no-feature .example {
	display: none;
	}

	input {
	width: 200px;
	}

	input[disabled] {
	cursor: default;
	}
	</style>
	<script>
	(function (window, undefined) {

	"use strict";

	var document = window.document,
	docElement = document.documentElement,
	SpeechRecognition = window.webkitSpeechRecognition \|\|
	window.mozSpeechRecognition \|\|
	window.msSpeechRecognition \|\|
	window.oSpeechRecognition \|\|
	window.SpeechRecognition;

	function addClass(className) {
	docElement.className = docElement.className + ' ' + className;
	}

	docElement.className = docElement.className.replace(/(^\|\s)no-js(\s\|$)/, '$1js$2');

	if ( SpeechRecognition !== undefined ) {
	addClass('feature');
	} else {
	addClass('no-feature');
	}

	})(window);
	</script>
	</head>
	<body>
	<noscript>Please <a href="http://www.enable-javascript.com/" target="_blank">enable JavaScript</a>. Thank You! :D</noscript>
	<div class="content">
	<h1 class="yes">yap, it has support :D</h1>
	<h1 class="no">nope, it doesn't have support :(</h1>
	<div class="example">
	e.g.:
	<input type="search" id="speech-transcript">
	<input type="button" value="click me! :D" id="speech-btn">
	</div>
	</div>
	<script>
	(function (window, undefined) {

	"use strict";

	var speechBtn = document.getElementById('speech-btn'),
	SpeechRecognition = window.webkitSpeechRecognition \|\|
	window.mozSpeechRecognition \|\|
	window.msSpeechRecognition \|\|
	window.oSpeechRecognition \|\|
	window.SpeechRecognition,
	speechTranscript = document.getElementById('speech-transcript'),
	sr;

	if ( SpeechRecognition !== undefined ) {

	sr = new SpeechRecognition();

	speechBtn.addEventListener('click', function () {
	sr.start();
	});

	sr.onaudiostart = function () {
	speechBtn.setAttribute('disabled', 'disabled');
	speechBtn.value = "don't be shy, start speaking!";
	};

	sr.onspeechstart = function () {
	speechBtn.value = "I'm listening...";
	};

	sr.onspeechend = function () {
	speechBtn.value = '...aand you stopped';
	};

	sr.onend = function () {
	speechBtn.value = 'click me! :D';
	speechBtn.removeAttribute('disabled');
	};

	sr.onresult = function (event) {
	speechTranscript.value = event.results[0][0].transcript;
	};

	}

	})(window);
	</script>
	</body>
	</html>