Skip to content

Instantly share code, notes, and snippets.

@cheeaun

cheeaun/say.html

Created March 19, 2010 04:24
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save cheeaun/337230 to your computer and use it in GitHub Desktop.
Save cheeaun/337230 to your computer and use it in GitHub Desktop.
Download ZIP
Experimental page to test html5 <audio> tag with google translate tts technology.
Raw
say.html
<!DOCTYPE html>
<title>Say it to me!</title>
<link rel="stylesheet" href="http://cheeaun.github.com/cacss/ca.min.css">
<style>
body{
text-align: center;
}
input, button{
font-size: 2em;
width: 70%;
margin: 0 0 1em;
padding: .2em;
}
</style>
<h1>Say it to me!</h1>
<form id="say-form">
<input value="Awesome" id="say-text">
<button id="say-button">Say!</button>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
var audioTagSupport = !!(document.createElement('audio').canPlayType);
$('#say-form').submit(function(){
if (!audioTagSupport) return false;
var text = $.trim($('#say-text').val());
if (text == '') return false;
var audio = document.createElement('audio');
audio.setAttribute('src', 'http://translate.google.com/translate_tts?tl=en&q=' + encodeURIComponent(text));
audio.load();
audio.play();
return false;
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment