thekid/index.html

## index.html
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Speech test</title>
</head>
<body>
  <h1>Speech test</h1>

  <form>
    <label for="input">Input</label>
    <input name="input" type="text" size="80" placeholder="..." style="width: 90%">
    <button name="record" type="button">Record</form>
  </form>

  <script type="module">
    var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;

    document.forms[0].elements['record'].addEventListener('click', (e) => {
      e.preventDefault();

      let timeout = null;

      const trigger = e.target;
      trigger.innerText = 'Waiting...';
      trigger.disabled = true;

      const input = document.forms[0].elements['input'];

      const recognition = new SpeechRecognition();
      recognition.continuous = true;
      recognition.lang = 'de-DE';
      recognition.interimResults = true;

      recognition.onresult = (e) => {
        console.log('Result:', e.results);
        timeout && clearTimeout(timeout);

        let value = '';
        for (const result of e.results) {
          value += ' ' + result[0].transcript;
        }
        input.value = value;

        if (e.results[e.results.length - 1].isFinal) {
          timeout = setTimeout(() => {
            console.log('Timeout');
            recognition.stop();
          }, 2000);
        }
      };

      recognition.onerror = (e) => {
        console.log('Error:', e);
      };

      recognition.onspeechend = (e) => {
        console.log('Speech ended:', e);
        recognition.stop();

        trigger.innerText = 'Record';
        trigger.disabled = false;
      };

      recognition.onspeechstart = (e) => {
        console.log('Speech started:', e);

        trigger.innerText = 'Recording...';
        trigger.disabled = true;
      };

      recognition.start();
    });
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="de">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Speech test</title>
	</head>
	<body>
	<h1>Speech test</h1>

	<form>
	<label for="input">Input</label>
	<input name="input" type="text" size="80" placeholder="..." style="width: 90%">
	<button name="record" type="button">Record</form>
	</form>

	<script type="module">
	var SpeechRecognition = SpeechRecognition \|\| webkitSpeechRecognition;

	document.forms[0].elements['record'].addEventListener('click', (e) => {
	e.preventDefault();

	let timeout = null;

	const trigger = e.target;
	trigger.innerText = 'Waiting...';
	trigger.disabled = true;

	const input = document.forms[0].elements['input'];

	const recognition = new SpeechRecognition();
	recognition.continuous = true;
	recognition.lang = 'de-DE';
	recognition.interimResults = true;

	recognition.onresult = (e) => {
	console.log('Result:', e.results);
	timeout && clearTimeout(timeout);

	let value = '';
	for (const result of e.results) {
	value += ' ' + result[0].transcript;
	}
	input.value = value;

	if (e.results[e.results.length - 1].isFinal) {
	timeout = setTimeout(() => {
	console.log('Timeout');
	recognition.stop();
	}, 2000);
	}
	};

	recognition.onerror = (e) => {
	console.log('Error:', e);
	};

	recognition.onspeechend = (e) => {
	console.log('Speech ended:', e);
	recognition.stop();

	trigger.innerText = 'Record';
	trigger.disabled = false;
	};

	recognition.onspeechstart = (e) => {
	console.log('Speech started:', e);

	trigger.innerText = 'Recording...';
	trigger.disabled = true;
	};

	recognition.start();
	});
	</script>
	</body>
	</html>