JoshCheek/get_the_browser_to_talk_to_you.html

## get_the_browser_to_talk_to_you.html
<!doctype html>
<!-- http://codepen.io/josh_cheek/pen/WpeqKp -->
<meta charset="utf-8"/>
<textarea autofocus cols="30" rows="6">Nuestras gatas beben leche</textarea>
<button onclick="say(document.querySelector('textarea').value)">
  ¡Hablas!
</button>


<script>
const synth = window.speechSynthesis
const mexicanSpanish = 'es-MX'
function say(text) {
  const u  = new SpeechSynthesisUtterance(text)
  u.voice  = synth.getVoices()  // returns [] if it hasn't loaded the voices yet :/ there is a `synth.onvoiceschanged` event which mith be able to mitigate this
                  .find(v => v.lang === mexicanSpanish)
  u.rate   = 1  // default speed, larger is faster
  u.pitch  = 1  // default pitch, larger is higher frequency (rhs of piano)
  u.volume = 1  // default volume, larger is louder
  synth.speak(u)
}
</script>


<style>
textarea, button {
  font-size:   2em;
  margin-top:  1em;
  margin-left: 1em;
  padding:     0.3em 0.5em;
  display:     block;
}
</style>
	<!doctype html>
	<!-- http://codepen.io/josh_cheek/pen/WpeqKp -->
	<meta charset="utf-8"/>
	<textarea autofocus cols="30" rows="6">Nuestras gatas beben leche</textarea>
	<button onclick="say(document.querySelector('textarea').value)">
	¡Hablas!
	</button>


	<script>
	const synth = window.speechSynthesis
	const mexicanSpanish = 'es-MX'
	function say(text) {
	const u = new SpeechSynthesisUtterance(text)
	u.voice = synth.getVoices() // returns [] if it hasn't loaded the voices yet :/ there is a `synth.onvoiceschanged` event which mith be able to mitigate this
	.find(v => v.lang === mexicanSpanish)
	u.rate = 1 // default speed, larger is faster
	u.pitch = 1 // default pitch, larger is higher frequency (rhs of piano)
	u.volume = 1 // default volume, larger is louder
	synth.speak(u)
	}
	</script>


	<style>
	textarea, button {
	font-size: 2em;
	margin-top: 1em;
	margin-left: 1em;
	padding: 0.3em 0.5em;
	display: block;
	}
	</style>