diedVIPs

html knowhow

Text in Sprache umwandeln












Text in Sprache umwandeln mit Sprachanpassung

So sieht´s aus
Quellcode
<html>
<head>

<style type="text/css">
* {box-sizing: border-box;}
.wrapper {background-color: #fff; padding: 25px 30px; border-radius: 10px; width: 350px; z-index: 10; box-shadow: 0 0 7px #7632b9;}
.wrapper header {text-align: center; font-size: 24px; font-weight: 500; margin-bottom: 20px;}
.wrapper form .row{display: flex; flex-direction: column; margin-bottom: 20px;}
.wrapper form .row label {font-size: 18px; margin-bottom: 5px;}
.wrapper form :where(textarea, select, button) {border: 0; border-radius: 5px; width: 100%; outline: none;}
.wrapper form .row textarea{font-family: inherit; font-size: 16px; height: 120px; padding: 8px 10px; resize: none; border: 1px solid #999;}
.wrapper form select {font-size: 16px;}
.wrapper form .row .outer {height: 45px; border: 1px solid #999; padding: 0px 10px; border-radius: 5px; font-family: inherit; display: flex; align-items: center;}
.wrapper button {padding: 10px 20px; font-family: inherit; font-size: 16px; background-color:#7632b9; color: #fff; cursor: pointer;}
</style>
</head>

<body>
<center>
<div class="wrapper">
<form>
<div class="row">
<label>Geben Sie einen Text ein</label>
<textarea></textarea>
</div>

<div class="row">
<label>Einen Sprecher wählen</label>
<div class="outer">
<select>
</select>
</div>
</div>
<button>
Convert Text To Speech
</button>
</form>
</div></center>
<script>

'use strict'
const textarea = document.querySelector('textarea');
const btn = document.querySelector('button');
const voiceList = document.querySelector('select');
let isSpeaking = true;
function voices() {
for (let voice of speechSynthesis.getVoices()) {
const selected = voice.name === "Google US English" ? 'selected' : '';
const option = `<option value ="${voice.name}" ${selected}>${voice.name} (${voice.lang})</option>`;
voiceList.insertAdjacentHTML('beforeend', option)
}
}
speechSynthesis.addEventListener('voiceschanged', voices)
function convertText(text) {
const talk = new SpeechSynthesisUtterance(text);
for (let voice of speechSynthesis.getVoices()) {
if (voice.name === voiceList.value) {
talk.voice = voice;
}
}
speechSynthesis.speak(talk)
}
btn.addEventListener('click', function (e) {
e.preventDefault();
console.log('working');
if (textarea.value !== '') {
if (!speechSynthesis.speaking) {
convertText(textarea.value)
}
if (isSpeaking) {
isSpeaking = false;
btn.innerText = 'Pause Speech';
speechSynthesis.resume();
} else {
isSpeaking = true;
btn.innerText = 'Resume Speech';
speechSynthesis.pause();
}
setInterval(() => {
if (!speechSynthesis.speaking && !isSpeaking) {
isSpeaking = true;
btn.innerText = 'Convert Text To Speech';
}
})
} else {
btn.innerText = 'Convert Text To Speech';
}
})
</script>
</body>

</html>


Kontakt    Datenschutz    Impressum