Instantly share code, notes, and snippets.

@danwahl /index.html
Last active Nov 11, 2017

Embed
What would you like to do?
Mono Speaking Aid
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment