Beispiel:JS-WebSpeech-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" >
  <link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">  
  <title>Sprachausgabe mit Web Speech - 2</title>
<style>
form {
	display: grid;
	grid-template-columns: 7em 15em;
	
	#utterance,
	#speak { grid-column: 1 / -1;}
	
	input[type="range"],
	select {
  	width: 18em;
		margin-bottom: 1em;
	}
	label:after {content:":"}
}

.not-supported {
  color: #c82f04;
  font-weight: bold;
}
[contenteditable] {
	padding: 1em 1em 1em 3em;
	margin: 1em 0 1em 1em;
	outline: thin dashed #CCC;
	position: relative;
}

[contenteditable]::after {
	position: absolute;
	content: '✏';
	left: 0em;
	top: 0em;
	font-size: 2em;
	transform: rotate(45deg);
}

[contenteditable]:hover {
	outline: medium dashed #c82f04;
}
.not-supported {
  color: #c82f04;
	border-left: medium solid;
	margin-left: 1em;
}

body {
	max-width: 30em;
	margin: 0 auto;
}
</style>
<script>
'use strict';  
document.addEventListener('DOMContentLoaded', function () {
  const controlsForm = document.querySelector('#controls');
  const utteranceText = document.querySelector('#utterance');
  const voiceSelect = document.querySelector('#voice');
  const volumeSlider = document.querySelector('#volume');
  const rateSlider = document.querySelector('#rate');
  const pitchSlider = document.querySelector('#pitch');
  const speakButton = document.querySelector('#speak');
  const supportMsg = document.querySelector('#msg');
  let voices = [];

  if ('speechSynthesis' in window) {
    supportMsg.textContent = 'Super! Dein Browser unterstützt SpeechSynthesis.';
    populateVoices();
    speechSynthesis.onvoiceschanged = populateVoices; 
  } else {
    supportMsg.textContent = 'Sorry! Browser unterstützt keine SpeechSynthesis.';
    supportMsg.classList.add('not-supported');
    return; // Exit if SpeechSynthesis is not supported
  }

  // Populate the voices in the select menu
  function populateVoices() {
    voices = speechSynthesis.getVoices();
    voiceSelect.innerHTML = ''; 
    voices.forEach((voice, index) => {
      const option = document.createElement('option');
      option.value = index;
      option.textContent = `${voice.name} (${voice.lang})`;
      if (voice.default) {
        option.textContent += ' [Default]';
      }
      voiceSelect.appendChild(option);
    });
  }

  // Handle speak button click
  speakButton.addEventListener('click', () => {
    const text = utteranceText.textContent.trim();
    if (!text) {
      alert('Bitte geben Sie Text ein, der vorgelesen werden soll!');
      return;
    }

    const utterance = new SpeechSynthesisUtterance(text);
    const selectedVoiceIndex = voiceSelect.value;
    if (selectedVoiceIndex) {
      utterance.voice = voices[selectedVoiceIndex];
    }
    utterance.volume = parseFloat(volumeSlider.value);
    utterance.rate = parseFloat(rateSlider.value);
    utterance.pitch = parseFloat(pitchSlider.value);

    speechSynthesis.speak(utterance);
  });
});
</script>
</head>

<body>
<h1>Sprachausgabe mit Web Speech - 2</h1>

<p id="msg"></p>
<form id="controls">
	<p id="utterance" contenteditable>Ja, hallo erstmal! Ich weiß nicht, ob sie's schon wussten, aber man kann sich Text auch vorlesen lassen.</p>
	<label for="voice">Stimme</label>
	<select name="voice" id="voice"></select>
	
	<label for="volume">Lautstärke</label>
	<input type="range" min="0" max="1" step="0.1" name="volume" id="volume" value="1">

	<label for="rate">Geschwindigkeit</label>
	<input type="range" min="0.1" max="10" step="0.1" name="rate" id="rate" value="1">

	<label for="pitch">Tonhöhe</label>
	<input type="range" min="0" max="2" step="0.1" name="pitch" id="pitch" value="1">

	<button type="button" id="speak">▶ (Sprich!)</button>
</form>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:JS-WebSpeech-2.html&oldid=100745“