danwahl/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">

    <title>Mono Speaking Aid Aid</title>

    <style>
      body, html {
        margin: 0;
      }

      html {
        height: 100%;
      }

      body {
        height: inherit;
        background-color: gray;
      }

      div.results {
        background-color: white;
        padding: 10px;
        margin: 10px;
        font-size: 32px;
        font-family: Sans-Serif;
      }

      input#speech-msg {
        border: none;
        width: 100%;
        height: 100%;
        font-size: 32px;
        font-family: Sans-Serif;
      }


      input:focus {
        outline:none;
      }
    </style>
  </head>

  <body>
    <div id="msg">
    </div>

    <div class="results">
      <input type="text" name="speech-msg" id="speech-msg" x-webkit-speech>
    </div>

    <div id="previous">
    </div>

    <script>
      // Check for browser support
      var supportMsg = document.getElementById('msg');

      if ('speechSynthesis' in window) {
        //supportMsg.innerHTML = 'Your browser <strong>supports</strong> speech synthesis.';
      } else {
        supportMsg.innerHTML = 'Sorry your browser <strong>does not support</strong> speech synthesis.<br>Try this in <a href="https://www.google.co.uk/intl/en/chrome/browser/canary.html">Chrome Canary</a>.';
        supportMsg.classList.add('not-supported');
      }

      // Get the text input element.
      var speechMsgInput = document.getElementById('speech-msg');

      speechMsgInput.addEventListener("keydown", function (e) {
          if (e.keyCode === 13) {  //checks whether the pressed key is "Enter"
            if (speechMsgInput.value.length > 0) {
              speak(speechMsgInput.value);

              // create div
              var div = document.createElement('div');
              div.innerHTML = speechMsgInput.value;
              div.setAttribute('class', 'results');
              div.onclick = function () {
                  speak(this.innerHTML);
              };

              // append to beginning previous section
              fc = document.getElementById('previous').firstChild
              if(fc) document.getElementById('previous').insertBefore(div, fc);
              else document.getElementById('previous').appendChild(div);

              // reset interim
              speechMsgInput.value = '';
            }
          }
      });

      // Create a new utterance for the specified text and add it to
      // the queue.
      function speak(text) {
        // Create a new instance of SpeechSynthesisUtterance.
        var msg = new SpeechSynthesisUtterance();

        // Set the text.
        msg.text = text;

        // Set the attributes.
        msg.volume = 1.0;
        msg.rate = 1.0;
        msg.pitch = 1.0;

        // If a voice has been selected, find the voice and set the
        // utterance instance's voice attribute.
        msg.voice = speechSynthesis.getVoices()[0];

        msg.onstart = function(event) {
          document.body.style.backgroundColor = "#339966";
        };

        msg.onend = function(event) {
          document.body.style.backgroundColor = "gray";
        };

        // Queue this utterance.
        window.speechSynthesis.speak(msg);
      }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width">

	<title>Mono Speaking Aid Aid</title>

	<style>
	body, html {
	margin: 0;
	}

	html {
	height: 100%;
	}

	body {
	height: inherit;
	background-color: gray;
	}

	div.results {
	background-color: white;
	padding: 10px;
	margin: 10px;
	font-size: 32px;
	font-family: Sans-Serif;
	}

	input#speech-msg {
	border: none;
	width: 100%;
	height: 100%;
	font-size: 32px;
	font-family: Sans-Serif;
	}


	input:focus {
	outline:none;
	}
	</style>
	</head>

	<body>
	<div id="msg">
	</div>

	<div class="results">
	<input type="text" name="speech-msg" id="speech-msg" x-webkit-speech>
	</div>

	<div id="previous">
	</div>

	<script>
	// Check for browser support
	var supportMsg = document.getElementById('msg');

	if ('speechSynthesis' in window) {
	//supportMsg.innerHTML = 'Your browser <strong>supports</strong> speech synthesis.';
	} else {
	supportMsg.innerHTML = 'Sorry your browser <strong>does not support</strong> speech synthesis.<br>Try this in <a href="https://www.google.co.uk/intl/en/chrome/browser/canary.html">Chrome Canary</a>.';
	supportMsg.classList.add('not-supported');
	}

	// Get the text input element.
	var speechMsgInput = document.getElementById('speech-msg');

	speechMsgInput.addEventListener("keydown", function (e) {
	if (e.keyCode === 13) { //checks whether the pressed key is "Enter"
	if (speechMsgInput.value.length > 0) {
	speak(speechMsgInput.value);

	// create div
	var div = document.createElement('div');
	div.innerHTML = speechMsgInput.value;
	div.setAttribute('class', 'results');
	div.onclick = function () {
	speak(this.innerHTML);
	};

	// append to beginning previous section
	fc = document.getElementById('previous').firstChild
	if(fc) document.getElementById('previous').insertBefore(div, fc);
	else document.getElementById('previous').appendChild(div);

	// reset interim
	speechMsgInput.value = '';
	}
	}
	});

	// Create a new utterance for the specified text and add it to
	// the queue.
	function speak(text) {
	// Create a new instance of SpeechSynthesisUtterance.
	var msg = new SpeechSynthesisUtterance();

	// Set the text.
	msg.text = text;

	// Set the attributes.
	msg.volume = 1.0;
	msg.rate = 1.0;
	msg.pitch = 1.0;

	// If a voice has been selected, find the voice and set the
	// utterance instance's voice attribute.
	msg.voice = speechSynthesis.getVoices()[0];

	msg.onstart = function(event) {
	document.body.style.backgroundColor = "#339966";
	};

	msg.onend = function(event) {
	document.body.style.backgroundColor = "gray";
	};

	// Queue this utterance.
	window.speechSynthesis.speak(msg);
	}
	</script>
	</body>
	</html>