<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Text to Speech</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel='stylesheet' href='https://treehouse-code-samples.s3.amazonaws.com/poly/css/application.css'>
<body style="background-color:GREEN;">
</body>
<style>
textarea {
resize: vertical;
}
.form__input {
background-color : ;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no" >
<div class="grid">
<div class="grid__col--12">
<textarea class="form__input" id="text">The voice consists of sound made by a human being using the vocal folds for talking, reading, singing, laughing, crying, screaming etc. The human voice is specifically a part of human sound production in which the vocal folds (vocal cords) are the primary sound source.</textarea>
<center> <select id="voiceselection">
<option value="UK English Female">UK English Female</option>
<option value="UK English Male">UK English Male</option>
<option value="US English Female">US English Female</option>
<option value="US English Male">US English Male</option>
<option value="Arabic Male">Arabic Male</option>
<option value="Arabic Female">Arabic Female</option>
<option value="Armenian Male">Armenian Male</option>
<option value="Australian Female">Australian Female</option>
<option value="Brazilian Portuguese Female">Brazilian Portuguese Female</option>
<option value="Chinese Female">Chinese Female</option>
<option value="Chinese (Hong Kong) Female">Chinese (Hong Kong) Female</option>
<option value="Chinese Taiwan Female">Chinese Taiwan Female</option>
<option value="Czech Female">Czech Female</option>
<option value="Danish Female">Danish Female</option>
<option value="Deutsch Female">Deutsch Female</option>
<option value="Dutch Female">Dutch Female</option>
<option value="Finnish Female">Finnish Female</option>
<option value="French Female">French Female</option>
<option value="Greek Female">Greek Female</option>
<option value="Hatian Creole Female">Hatian Creole Female</option>
<option value="Hindi Female">Hindi Female</option>
<option value="Hungarian Female">Hungarian Female</option>
<option value="Indonesian Female">Indonesian Female</option>
<option value="Italian Female">Italian Female</option>
<option value="Japanese Female">Japanese Female</option>
<option value="Korean Female">Korean Female</option>
<option value="Latin Female">Latin Female</option>
<option value="Norwegian Female">Norwegian Female</option>
<option value="Polish Female">Polish Female</option>
<option value="Portuguese Female">Portuguese Female</option>
<option value="Romanian Male">Romanian Male</option>
<option value="Russian Female">Russian Female</option>
<option value="Slovak Female">Slovak Female</option>
<option value="Spanish Female">Spanish Female</option>
<option value="Spanish Latin American Female">Spanish Latin American Female</option>
<option value="Swedish Female">Swedish Female</option>
<option value="Tamil Male">Tamil Male</option>
<option value="Thai Female">Thai Female</option>
<option value="Turkish Female">Turkish Female</option>
<option value="Afrikaans Male">Afrikaans Male</option>
<option value="Albanian Male">Albanian Male</option>
<option value="Bosnian Male">Bosnian Male</option>
<option value="Catalan Male">Catalan Male</option>
<option value="Croatian Male">Croatian Male</option>
<option value="Czech Male">Czech Male</option>
<option value="Danish Male">Danish Male</option>
<option value="Esperanto Male">Esperanto Male</option>
<option value="Finnish Male">Finnish Male</option>
<option value="Greek Male">Greek Male</option>
<option value="Hungarian Male">Hungarian Male</option>
<option value="Icelandic Male">Icelandic Male</option>
<option value="Latin Male">Latin Male</option>
<option value="Latvian Male">Latvian Male</option>
<option value="Macedonian Male">Macedonian Male</option>
<option value="Moldavian Male">Moldavian Male</option>
<option value="Montenegrin Male">Montenegrin Male</option>
<option value="Norwegian Male">Norwegian Male</option>
<option value="Serbian Male">Serbian Male</option>
<option value="Serbo-Croatian Male">Serbo-Croatian Male</option>
<option value="Slovak Male">Slovak Male</option>
<option value="Swahili Male">Swahili Male</option>
<option value="Swedish Male">Swedish Male</option>
<option value="Vietnamese Male">Vietnamese Male</option>
<option value="Welsh Male">Welsh Male</option>
<option value="Fallback UK Female">Fallback UK Female</option>
</select>
<p></p>
<p>
<button class="btn--default" id="playbutton">Play</button>
<button class="btn--error" id="stopbutton">Stop</button>
</p>
</div>
</div>
<script src='https://code.responsivevoice.org/responsivevoice.js'></script>
<script id="rendered-js" >
playbutton.onclick = function () {
responsiveVoice.cancel();
responsiveVoice.speak(document.getElementById('text').value, document.getElementById('voiceselection').value);
};
stopbutton.onclick = function () {
responsiveVoice.cancel();
};
</script>
<style>
.btn1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 5px 8px 5px 0 ;
border-radius: 15px;
border-color: #fa0000;
background-color: #fa0000;
color: white;
font-size: 3px;
font-weight: bolder;
letter-spacing: 0.5px;
vertical-align: middle;
}
.btn1:hover{
color: #fa0000;
background-color: white;
vertical-align: middle;
border: 1.6px solid #fa0000;
}
fa {
color: white;
}
fa:hover{
color:#fa0000;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
<style>
.button {
position: relative;
background-color: red;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #f1f1f1;
display: block;
position: absolute;
padding-top: 200%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
</style>
</html>
