Text in Sprache umwandeln

<html>
<head>
<style type="text/css">
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
#page-wrapper {width: 640px; background: #FFFFFF; padding: 1em; margin: 1em auto; border-top: 5px solid #69c773; box-shadow: 0 2px 10px rgba(0,0,0,0.8);}
h1 {margin-top: 0;}
#msg {font-size: 0.9em; line-height: 1.4em;}
#msg.not-supported strong {color: #CC0000;}
input[type=text] {width: 100%; padding: 0.5em; font-size: 1.2em; border-radius: 3px; border: 1px solid #D9D9D9; box-shadow: 0 2px 3px rgba(0,0,0,0.1) inset;}
input[type=range] {width: 300px;}
label {display: inline-block; float: left; width: 150px;}
.option {margin: 1em 0;}
button {display: inline-block; border-radius: 3px; border: none; font-size: 0.9rem; padding: 0.5rem 0.8em; background: #69c773; border-bottom: 1px solid #498b50;
color: white; -webkit-font-smoothing: antialiased; font-weight: bold; margin: 0; width: 100%; text-align: center;}
button:hover, button:focus {opacity: 0.75; cursor: pointer;}
button:active {opacity: 1; box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1) inset;}
</style>
</head>

<body >
<div id="page-wrapper">
<p id="msg"></p>
<input type="text" name="speech-msg" id="speech-msg" x-webkit-speech>
<div class="option"><label for="voice">Stimme</label><select name="voice" id="voice"></select></div>
<div class="option"><label for="volume">Lautstärke</label><input type="range" min="0" max="1" step="0.1" name="volume" id="volume" value="1"></div>
<div class="option"><label for="rate">Geschwindigkeit</label><input type="range" min="0.1" max="10" step="0.1" name="rate" id="rate" value="1"></div>
<div class="option"><label for="pitch">Tonhöhe</label><input type="range" min="0" max="2" step="0.1" name="pitch" id="pitch" value="1"></div>
<button id="speak">Sprechen</button>
</div>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script id="rendered-js" >
var supportMsg = document.getElementById('msg');
if ('speechSynthesis' in window) {
supportMsg.innerHTML = 'Your browser <strong>supports</strong> speech synthesis.';
} else {
supportMsg.innerHTML = 'Sorry your browser <strong>does not support</strong> speech synthesis.<br>Try this in <a href="https://www.google.co.uk/intl/en/chrome/browser/canary.html">Chrome Canary</a>.';
supportMsg.classList.add('not-supported');}
var button = document.getElementById('speak');
var speechMsgInput = document.getElementById('speech-msg');
var voiceSelect = document.getElementById('voice');
var volumeInput = document.getElementById('volume');
var rateInput = document.getElementById('rate');
var pitchInput = document.getElementById('pitch');
function loadVoices() {
var voices = speechSynthesis.getVoices(); voices.forEach(function (voice, i) {
var option = document.createElement('option');
option.value = voice.name;
option.innerHTML = voice.name;
voiceSelect.appendChild(option); });}
loadVoices();
window.speechSynthesis.onvoiceschanged = function (e) {
loadVoices();};
function speak(text) {
var msg = new SpeechSynthesisUtterance();
msg.text = text;
msg.volume = parseFloat(volumeInput.value);
msg.rate = parseFloat(rateInput.value);
msg.pitch = parseFloat(pitchInput.value);
if (voiceSelect.value) {
msg.voice = speechSynthesis.getVoices().filter(function (voice) {return voice.name == voiceSelect.value;})[0]; }
window.speechSynthesis.speak(msg);}
button.addEventListener('click', function (e) {
if (speechMsgInput.value.length > 0) {
speak(speechMsgInput.value);
}});
</script>
</body>

</html>

html knowhow

Text in Sprache umwandeln

Text in Sprache umwandeln