Spiele etwas mit de Voice Api des Browsers rum
Code
<!DOCTYPE html>
<html lang="en">
<head>
<!--Design by codemediaweb.com -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
body {
width: 100%;
height: 100%;
margin: 0;
font-family: sans-serif;
background: #188cfa;
}
#innerContainer h1{
text-align: center;
margin-top: 10px;
color: #0d64c8;
}
textarea{
min-height: 200px;
box-shadow: 0 0 20px rgba(0,139,253,0.35);
border: 5px solid rgba(77, 158, 220, 0.643);
width: 125%;
margin-left: -14%;
font-size: 18px;
font-family: sans-serif;
margin-top: 15px;
}
#outerContainer {
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
background: white;
margin: 100px auto;
box-shadow: 0 20px 25px rgba(60,60,100,0.15);
width: 400px;
padding: 10px;
border-radius: 3px;
}
select{
width: 70%;
margin-left: 15%;
margin-top: 30px;
height: 50px;
font-size: 18px;
border: 3px solid #68a7eb;
background: #deedf3;
}
#sayitBtn{
width: 150px;
height: 50px;
margin: 35px auto;
margin-left: 30%;
background: #087cca;
border: none;
color: white;
font-size: 20px;
}
#innerContainer {
}
</style>
</head>
<body>
<div id="outerContainer">
<div id="innerContainer">
<h1>Text-to-Speech</h1>
<textarea id="txtInput" placeHolder="Enter text to be spoken" cols="40" rows="5" ></textarea>
<br />
<select id="voice">
<option value="0">US English</option>
<option value="1">UK English Male</option>
<option value="2">UK English Female</option>
<option value="3">Spanish</option>
<option value="4">French</option>
<option value="5">Italian</option>
<option value="6">German</option>
<option value="7">Japanese</option>
<option value="8">Korean</option>
<option value="9">Chinese</option>
</select>
<br>
<input type="button" value="Say it" id="sayitBtn"></input>
</div>
</div>
<script type="text/javascript">
var voice = document.getElementById("voice");
var txtInput = document.getElementById("txtInput");
var sayitBtn = document.getElementById("sayitBtn");
sayitBtn.onclick = function() {
speech = new SpeechSynthesisUtterance(txtInput.value);
console.log("Saying: " + txtInput.value);
speech.voice = speechSynthesis.getVoices()[parseInt(voice.value)];
speechSynthesis.speak(speech);
}
</script>
</body>
</html>