SELF-Treffen in Mannheim 2025

SELFHTML wird 30 Jahre alt! → Veranstaltungs-Ankündigung.

Beispiel:JS-WebSpeech-2unicode.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 - Unicode</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; }

</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>

Dekorative Unicode-Schrift mit Web Speech

<form id="controls">

Achtung! Achtung!
𝔻𝕒𝕤 𝕚𝕤𝕥 𝕖𝕚𝕟 𝕊𝕚𝕔𝕙𝕖𝕣𝕙𝕖𝕚𝕥𝕤𝕙𝕚𝕟𝕨𝕖𝕚𝕤!
Bitte 𝐧𝐢𝐜𝐡𝐭 nachmachen!
𝕭𝖎𝖙𝖙𝖊 𝖓𝖎𝖈𝖍𝖙 𝖓𝖆𝖈𝖍𝖒𝖆𝖈𝖍𝖊𝖓!
𝓑𝓲𝓽𝓽𝓮 𝓷𝓲𝓬𝓱𝓽 𝓷𝓪𝓬𝓱𝓶𝓪𝓬𝓱𝓮𝓷!

<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-2unicode.html&oldid=102390“