ento · August 29, 2015 14:02
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <style>
    .centered {
      position: fixed;
      left: 50%;
      top: 50%;
    }
    #message {
      width: 10em;
      height: 2em;
      margin-left: -5em;
      margin-top: -1em;
      text-align: center;
      font-size: 10em;
    }
    #play {
      width: 20em;
      height: 5em;
      margin-left: -10em;
      margin-top: 5em;
      font-size: 120%;
    }

    #audio {
      position: fixed;
      bottom: 0;
      right: 0;
      margin-right: 1em;
      margin-bottom: 1em;
    }
  </style>
  <div id="content">
    <div id="message" class="centered">- - - - -</div>
    <button id="play" class="centered">Next</button>
    <!-- <audio id="audio" src="" controls="true"></audio> -->
  </div>
  <script>
    function makeTtsUrl(text, language) {
      var parts = ["http://translate.google.com/translate_tts?tl="];
      parts.push(language);
      parts.push("&q=");
      parts.push(text);
      parts.push("&textlen=");
      parts.push(text.length);
      return parts.join("");
    }
    function nextRandom() {
      return getRandomInt(10000, 99999);
    }
    function getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    function punctuate(text, punctuation) {
      return text.split("").join(punctuation);
    }
    var button = document.getElementById("play"),
      audio = document.getElementById("audio"),
      message = document.getElementById("message");
    button.addEventListener("click", function() {
      var text = nextRandom() + "",
        src = makeTtsUrl(punctuate(text, "。"), "ja");
      //audio.src = src;
      //audio.play();
      play(src);
      message.innerHTML = text;
    });
    // http://stackoverflow.com/questions/21004226/google-translate-text-to-speech-action-canceled
    function play(src) {
      var section, frame;

      section   = document.getElementsByTagName( "head" )[ 0 ];
      frame     = document.createElement( "iframe" );
      frame.src = src;

      section.appendChild( frame );
    }
  </script>
 </html>
	<!DOCTYPE html>
	<html>
	<style>
	.centered {
	position: fixed;
	left: 50%;
	top: 50%;
	}
	#message {
	width: 10em;
	height: 2em;
	margin-left: -5em;
	margin-top: -1em;
	text-align: center;
	font-size: 10em;
	}
	#play {
	width: 20em;
	height: 5em;
	margin-left: -10em;
	margin-top: 5em;
	font-size: 120%;
	}

	#audio {
	position: fixed;
	bottom: 0;
	right: 0;
	margin-right: 1em;
	margin-bottom: 1em;
	}
	</style>
	<div id="content">
	<div id="message" class="centered">- - - - -</div>
	<button id="play" class="centered">Next</button>
	<!-- <audio id="audio" src="" controls="true"></audio> -->
	</div>
	<script>
	function makeTtsUrl(text, language) {
	var parts = ["http://translate.google.com/translate_tts?tl="];
	parts.push(language);
	parts.push("&q=");
	parts.push(text);
	parts.push("&textlen=");
	parts.push(text.length);
	return parts.join("");
	}
	function nextRandom() {
	return getRandomInt(10000, 99999);
	}
	function getRandomInt(min, max) {
	return Math.floor(Math.random() * (max - min + 1)) + min;
	}
	function punctuate(text, punctuation) {
	return text.split("").join(punctuation);
	}
	var button = document.getElementById("play"),
	audio = document.getElementById("audio"),
	message = document.getElementById("message");
	button.addEventListener("click", function() {
	var text = nextRandom() + "",
	src = makeTtsUrl(punctuate(text, "。"), "ja");
	//audio.src = src;
	//audio.play();
	play(src);
	message.innerHTML = text;
	});
	// http://stackoverflow.com/questions/21004226/google-translate-text-to-speech-action-canceled
	function play(src) {
	var section, frame;

	section = document.getElementsByTagName( "head" )[ 0 ];
	frame = document.createElement( "iframe" );
	frame.src = src;

	section.appendChild( frame );
	}
	</script>
	</html>