js-webspeech-1.nnb

{
    "cells": [
        {
            "language": "markdown",
            "source": [
                "# Web-Speech-API\n\nSources:\nhttps://hacks.mozilla.org/2016/01/firefox-and-the-web-speech-api/\n\nhttps://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API#speech_synthesis\n\nhttps://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API\n\nhttps://developer.chrome.com/blog/web-apps-that-talk-introduction-to-the-speech-synthesis-api/\n\nhttps://www.sitepoint.com/talking-web-pages-and-the-speech-synthesis-api/\n\nhttps://wicg.github.io/speech-api/#tts-section"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "\n\nStartpunkt ist `window.SpechSynthesis` , diese liefert ein Objekt zurück."
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "const synth = window.SpeechSynthesis;"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "## Stimmenauswahl\nHierfür wird zunächst ein leeres Array erstellt, das dann die auf dem Betriebssystem verfügbaren Stimmen aufnimmt. \nDie Funktion `populateVoiceList()` füllt das Array, das\ndann dazu dient, die Stimmen in einem select-Element als Optionen zur Auswahl für den Benutzer zur Verfügung zu stellen. "
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "let voiceList = [];\n\nvoiceList = SpeechSynthesis.getVoices();\n// oder\nconst synth = window.SpeechSynthesis;\nvoiceList = synth.getVoices();"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "Die Funktion `getVoices()`liefert eine Liste der verfügbaren Stimmen. Jede Stimme ist ein Objekt, jeweil mit den Attributen (u.a.) `name` , `lang` und eine default-Wert `--DEFAULT`. Der default-Wert liegt vor,  wenn die gewählte Stimme die Standardstimme für die Sprachausgabe ist (also wenn `SpeechSynthesisVoice.default` den Wert `true` liefert).\n"
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "speechSynthesis.getVoices().forEach((voice) => {\n  console.log(voice.name, voice.default ? voice.default :'');\n});"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "Beispiel voice-Objekt:"
            ],
            "outputs": []
        },
        {
            "language": "html",
            "source": [
                "{id:48, voiceURI:\"Paulina\", name:\"Paulina\", lang: \"es-MX\", localService:true},\n{id:52, voiceURI:\"Samantha\", name:\"Samantha\", lang: \"en-US\", localService:true},\n{id:72, voiceURI:\"Google Deutsch\", name:\"Google Deutsch\", lang: \"de-DE\", localService:false} "
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "function setUpVoices() {\n    allVoices = getAllVoices();\n    createSpeakerMenu(allVoices);\n  }\n  \n  function getAllVoices() {\n    let voicesall = speechSynthesis.getVoices();\n    let vuris = [];\n    let voices = [];\n  \n    voicesall.forEach(function(obj,index) {\n      let uri = obj.voiceURI;\n      if (!vuris.includes(uri)) {\n        vuris.push(uri);\n        voices.push(obj);\n      }\n    });\n  \n    voices.forEach(function(obj,index) {obj.id = index;});\n    return voices;\n  }\n  \n  function createSpeakerMenu(voices) {\n    let code = ;\n  \n    voices.forEach(function(vobj,i) {\n      code += `<option value=${vobj.id}>`;\n      code += `${vobj.name} (${vobj.lang})`;\n      code += vobj.voiceURI.includes(\".premium\") ? ' (premium)' : ;\n      code += `</option>`;\n    });\n  \n    speakerMenu.innerHTML = code;\n    speakerMenu.selectedIndex = voiceIndex;\n  }"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                ""
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "Sind Stimmen-Array und speechSynthesis in einer Variablen gespeichert verkürzt sich der Ausdruck:"
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "synth = window.SpeechSynthesis;\nvoiceList = [];\n\nvoiceList = synth.getVoices()\n"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "Die Liste auf der Konsole ausgeben:"
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "voiceList.forEach((voice) => {\n  console.log(voice.name, voice.default ? voice.default :'');\n});"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "Die ausgewählte Stimme für die Sprachausgabe verwenden:"
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "let utterance = new SpeechSynthesisUtterance('hello learning users!');\nurrerance.voice = speechSynthesis.getVoices().filter(function(voice) { return voice.name == 'Whisper'; })[0];\nspeechSynthesis.speak(urrerance);"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "Mit zuvor gespeicherter `voiceList` und Arrow-function:"
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "let utterance = new SpeechSynthesisUtterance('hello learning users!');\nurrerance.voice = voiceList.filter((voice) => { \n  return voice.lang == 'de-DE'; })[0];\nspeechSynthesis.speak(urrerance);"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "Oder die Stimmenauswahl in einer Variablen speichern:"
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "let deVoice = voiceList.filter((voice) => { \n  return voice.lang == 'de-DE'; })[0];"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "Und die Variable `deVoice`für die Sprachausgabe verwenden:"
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "let utterance = new SpeechSynthesisUtterance('hello learning users!');\nurrerance.voice = deVoice;\nspeechSynthesis.speak(urrerance);"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "## Dropdown für die Stimmenauswahl\n\nStatt wie im Beispiel oben das Array mit den gespeicherten Stimmen zu nach Sprache zu filtern und dann die erste Stimme aus dem gefilterten Array (`voiceList...[0]`) für die Sprachausgabe zu nutzen, kann ein Dropdown-Menu zur Stimmauswahl durch den Benutzer eingefügt werden."
            ],
            "outputs": []
        },
        {
            "language": "html",
            "source": [
                "<select> Select a voice\n  <option>voice</option>\n</select>"
            ],
            "outputs": [
                {
                    "items": [
                        {
                            "mime": "text/html",
                            "value": [
                                "<select> Select a voice",
                                "  <option>voice</option>",
                                "</select>"
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "language": "markdown",
            "source": [
                "Um die Stimmen in das `<select>` -tag als Opttion einzufügen, wird über die Liste mit `for` oder, wie oben mit `forEach` iteriert und für jede Stimme ein `<option>` - Element erzeugt, dessen Text den Namen der Stimme und deren Sprache anzeigt: `SpeechSyntehsis.name` und `SpeechSynthesis.lang` ."
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "function populateVoiceList() {\n  voiceList = synth.getVoices();\n\n  for (i = 0; i < voiceList.length; i++) {\n    let option = document.createElement('option');\n    option.textContent = voiceList[i].name + ' (' + voiceList[i].lang + ')';\n\n    if (voices[i].default) {\n      option.textContent += ' -- DEFAULT';\n    }\n\n    option.setAttribute('data-lang', voiceList[i].lang);\n    option.setAttribute('data-name', voiceList[i].name);\n    voiceSelect.appendChild(option);\n  }\n}"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "### Exkurs: HTML data attribute\nhttps://www.w3schools.com/tags/att_data-.asp\nhttps://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_data\n\nhttps://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes\n\nOben: `data-lang` und `data-name` \n\nDas `data-*`-Attribut wird verwendet, um eigene, benutzerdefinierte Daten zu speichern, die der Seite oder Anwendung vorbehalten sind.\n\nDas `data-*`-Attribut gibt uns die Möglichkeit, benutzerdefinierte Datenattribute in alle HTML-Elemente einzubetten.\n\nDie gespeicherten (benutzerdefinierten) Daten können dann im JavaScript der Seite verwendet werden, um die Benutzerfreundlichkeit zu erhöhen (ohne Ajax-Aufrufe oder serverseitige Datenbankabfragen).\n\nDas `data-*`-Attribut besteht aus zwei Teilen:\n\n    - dem Präfix \"data-\" \n    - und dem Attributnamen\n\n\n    Der Attributname darf keine Großbuchstaben enthalten und muss nach dem Präfix \"data-\" mindestens ein Zeichen lang sein.\n    Der Attributwert kann eine beliebige Zeichenkette sein.\n\nHinweis: Benutzerdefinierte Attribute, denen das Präfix \"data-\" vorangestellt ist, werden vom User-Agent vollständig ignoriert und sind auch für Screenreader nicht zugänglich."
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "Der Aufruf der Funktion `populateVoiceList()` erfolgt mit einer if-bedingung, weil Firefox die Funktion `SpeechSynthesis.onVoiceChanged` nicht unterstützt."
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "populateVoiceList();\nif (speechSynthesis.onvoiceschanged !== undefined) {\n  speechSynthesis.onvoiceschanged = populateVoiceList;\n}"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "___\n"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "### Problem: Stimmen laden\n\nVgl.: https://dev.to/jankapunkt/cross-browser-speech-synthesis-the-hard-way-and-the-easy-way-353\n\nDas Laden der Stimmen funktioniert in einigen Browsern nicht, u.a. in Safari."
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "Die Liste mit den Stimmen kann synchron oder asynchron geladen werden. "
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "// sync\nconst voiceList = window.speechSynthesis.getVoices();\nvoiceList"
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "// async\nwindow.speechSynthesis.onvoiceschanged = function () {\n    const voiceList = window.speechSynthesis.getVoices()\n    voiceList\n  }"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "Beide Versionen kann man in der Browser-Konsole testen. In Safari liefern beide ein leeres Array."
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "console.log(`Voices #: ${speechSynthesis.getVoices().length}`)\n\n\nspeechSynthesis.getVoices().forEach((voice) => {\n    console.log(voice.name, voice.lang)\n})"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "Alternativ zur Stimmenauswahl lässt sich ggf. die Sprache bestimmen:"
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "// assume voices are loaded\nconst getVoicebyLang = lang => speechSynthesis\n  .getVoices()\n  .find(voice => voice.startsWith(lang))\n\nconst german = getVoicebyLang('de')"
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "utterance.voice = german // ios required\nutterance.lang = voice.lang // Android Chrome required\nutterance.voiceURI = voice.voiceURI // Who knows if required?"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "Eine konkrete Stimme festlegen, betriebssytem-spezifisch:\n"
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "let voice = speechSynthesis.getVoices().find((voice) => {\n    return voice.name == 'Bubbles'\n  }),\n  lyrics = new SpeechSynthesisUtterance(\n      `It's as simple as something that nobody knows\n       That her eyes are as big as her bubbly toes`\n  )\n  lyrics.voice = voice\n  speechSynthesis.speak(lyrics)"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "___"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "## Sprachauswahl\n\nhttps://css-tricks.com/using-the-web-speech-api-for-multilingual-translations/"
            ],
            "outputs": []
        },
        {
            "language": "html",
            "source": [
                "<h1>Multilingual Text To Speech</h1>\n<div class=\"uiunit\">\n  <label for=\"speakerMenu\">Voice: </label>\n  <select id=\"speakerMenu\"></select> speaks <span id=\"language\">English.</span>\n  <!-- etc. -->\n</div>"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "Den Sprachcode mit einem Namen verbinden:\n\n Jede Sprache wird durch einen zweistelligen Code identifiziert, z. B. \"en\" für Englisch oder \"es\" für Español (Spanisch). Wir nehmen eine einfache Liste dieser Codes und der entsprechenden Sprachen und erstellen ein Array von Objekten der Form: {\"code\": \"pt\", \"name\": \"Portugiesisch\"}. Dann brauchen wir eine Hilfsfunktion, die uns hilft, ein Array von Objekten nach dem Wert einer bestimmten Eigenschaft zu durchsuchen. \n"
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "function getLanguageTags() {\n    let langs = [\"ar-Arabic\",\"cs-Czech\",\"da-Danish\",\"de-German\",\"el-Greek\",\"en-English\",\"eo-Esperanto\",\"es-Spanish\",\"et-Estonian\",\"fi-Finnish\",\"fr-French\",\"he-Hebrew\",\"hi-Hindi\",\"hu-Hungarian\",\"id-Indonesian\",\"it-Italian\",\"ja-Japanese\",\"ko-Korean\",\"la-Latin\",\"lt-Lithuanian\",\"lv-Latvian\",\"nb-Norwegian Bokmal\",\"nl-Dutch\",\"nn-Norwegian Nynorsk\",\"no-Norwegian\",\"pl-Polish\",\"pt-Portuguese\",\"ro-Romanian\",\"ru-Russian\",\"sk-Slovak\",\"sl-Slovenian\",\"sq-Albanian\",\"sr-Serbian\",\"sv-Swedish\",\"th-Thai\",\"tr-Turkish\",\"zh-Chinese\"];\n    let langobjects = [];\n    for (let i=0;i<langs.length;i++) {\n      let langparts = langs[i].split(\"-\");\n      langobjects.push({\"code\":langparts[0],\"name\":langparts[1]});\n    }\n    return langobjects;\n  }\n  \n  // Generic Utility Functions\n  function searchObjects(array, prop, term, casesensitive = false) {\n    // Searches an array of objects for a given term in a given property\n    // Returns an array of only those objects that test positive\n    let regex = new RegExp(term, casesensitive ? \"\" : \"i\");\n    let newArrayOfObjects = array.filter(obj => regex.test(obj[prop]));\n    return newArrayOfObjects;\n  }"
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "// edit step 1\nlet speakBtn, txtFld, speakerMenu, language, allVoices, langtags;\nlet voiceIndex = 0;"
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "function init() {\n    speakBtn = qs(\"#speakBtn\");\n    txtFld = qs(\"#txtFld\"); \n    speakerMenu = qs(\"#speakerMenu\");\n    language = qs(\"#language\");\n    langtags = getLanguageTags();\n    speakBtn.addEventListener(\"click\", talk, false);\n    speakerMenu.addEventListener(\"change\", selectSpeaker, false);\n    if (window.speechSynthesis) {\n      if (speechSynthesis.onvoiceschanged !== undefined) {\n        // Chrome gets the voices asynchronously so this is needed\n        speechSynthesis.onvoiceschanged = setUpVoices;\n      }\n      setUpVoices(); // For all the other browsers\n    } else{\n      speakBtn.disabled = true;\n      speakerMenu.disabled = true;\n      qs(\"#warning\").style.display = \"block\";\n    }\n  }"
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "// Code for when the user selects a speaker\nfunction selectSpeaker() {\n  voiceIndex = speakerMenu.selectedIndex;\n  let sval = Number(speakerMenu.value);\n  let voice = allVoices[sval];\n  let langcode = voice.lang.substring(0,2);\n  let langcodeobj = searchObjects(langtags, \"code\", langcode);\n  language.innerHTML = langcodeobj[0].name;\n}"
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "function talk() {\n    let sval = Number(speakerMenu.value);\n    let u = new SpeechSynthesisUtterance();\n    u.voice = allVoices[sval];\n    u.lang = u.voice.lang;\n    u.text = txtFld.value;\n    u.rate = 0.8;\n    speechSynthesis.speak(u);\n  }"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "___\n"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "## SpeechSynthesisUtterance\n\nDer vorzulesende Text wird durch Benuthereingabe in einem Textfeld erzeugt und in einer Variablen gespeichert."
            ],
            "outputs": []
        },
        {
            "language": "html",
            "source": [
                "<label for=\"note-text\">Text:</label>\n<textarea id=\"note-text\"></textarea>"
            ],
            "outputs": [
                {
                    "items": [
                        {
                            "mime": "text/html",
                            "value": [
                                "<label for=\"text\">Text:</label>",
                                "<textarea id=\"text\"></textarea>"
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "language": "markdown",
            "source": [
                "Den Textinhalt des `<textarea>` erhält man über das Attribut `value`."
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "let noteText = document.getElementById('note-text').value;"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "Statt direkt einen konkreten Text zu übergeben, wie hier:"
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "let utterance = new SpeechSynthesisUtterance('hello learning users!');"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "kann man nun `noteText` an SpeechSynthesisUtterance übergeben"
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "let utterance = new SpeechSynthesisUtterance(noteText);"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "oder so:"
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "let utterance = new SpeechSynthesisUtterance();\nutterance.voice = noteText;"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "### Weitere Atribute\n\nZusätzlich können in gleicher Weise Sprechgeschwindigkeit und Stimmhöhe bestimmt werden.\n"
            ],
            "outputs": []
        },
        {
            "language": "html",
            "source": [
                "<div>\n    <label for=\"rate\">Rate</label><input type=\"range\" min=\"0.5\" max=\"2\" value=\"1\" step=\"0.1\" id=\"rate\">\n    <div class=\"rate-value\">1</div>\n    <div class=\"clearfix\"></div>\n</div>\n<div>\n    <label for=\"pitch\">Pitch</label><input type=\"range\" min=\"0.5\" max=\"2\" value=\"1\" step=\"0.1\" id=\"pitch\">\n    <div class=\"pitch-value\">1</div>\n    <div class=\"clearfix\"></div>\n</div>"
            ],
            "outputs": [
                {
                    "items": [
                        {
                            "mime": "text/html",
                            "value": [
                                "<div>",
                                "    <label for=\"rate\">Rate</label><input type=\"range\" min=\"0.5\" max=\"2\" value=\"1\" step=\"0.1\" id=\"rate\">",
                                "    <div class=\"rate-value\">1</div>",
                                "    <div class=\"clearfix\"></div>",
                                "</div>",
                                "<div>",
                                "    <label for=\"pitch\">Pitch</label><input type=\"range\" min=\"0.5\" max=\"2\" value=\"1\" step=\"0.1\" id=\"pitch\">",
                                "    <div class=\"pitch-value\">1</div>",
                                "    <div class=\"clearfix\"></div>",
                                "</div>"
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "language": "javascript",
            "source": [
                "pitch.onchange = function () {\n  pitchValue.textContent = pitch.value;\n}\n\nrate.onchange = function () {\n  rateValue.textContent = rate.value;\n}\n"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "___"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "## querySelector abkürzen und Fehler abfangen:\nQuelle: https://css-tricks.com/using-the-web-speech-api-for-multilingual-translations/"
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "let speakBtn, txtFld;\n\nfunction init() {\n  speakBtn = qs(\"#speakBtn\");\n  txtFld = qs(\"#txtFld\");\n  speakBtn.addEventListener(\"click\", talk, false);\n  if (!window.speechSynthesis) {\n    speakBtn.disabled = true;\n    qs(\"#warning\").style.display = \"block\";\n  }\n}\n\nfunction talk() {\n  let u = new SpeechSynthesisUtterance();\n  u.text = txtFld.value;\n  speechSynthesis.speak(u);\n}\n\n// Reusable utility functions\nfunction qs(selectorText) {\n  // Saves lots of typing for those who eschew jQuery\n  return document.querySelector(selectorText);\n}\n\ndocument.addEventListener('DOMContentLoaded', function (e) {\n  try {init();} catch (error) {\n    console.log(\"Data didn't load\", error);\n  }\n});"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "## Sprachausgabe starten\n\nDer Start der Sprachausgabe wird mit einem EventHandler eines Buttons oder der `onSubmit` - Funktion eines Formulars gesteuert. \nDer vorzulesende Text wird durch Benutzereingabe in einem Textfeld erzeugt (oder eine Datei wird geladen) und in einer Variablen gespeichert.\n"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "\nDann wird über eine Konstruktor ein neues Objekt von `SpeechSynthesisUtterance`  erzeugt, das als Parameter die Variable mit dem gespeicherten Text erhält. \n\nDie zum Vorlesen zu verwendende Stimme \n- liefert die Eigensxhaft `selectedOption` des HTML `<select>`- Elements oder\n- wird aus der Stimmenliste ggf. über einen Filter bereits vom Entwickler vorgegeben \n- wird keine Stimme festglegt, wird die default- Stimme des Betriebssystem beunutz.\n\n"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "Abschließend wird die Funktion `speak()` mit dem `SpeechSynthesisUtterance` - Objekt, also dem in der Variablen `utterance` gespeicherten Text als Attribut, aufgerufen."
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "inputForm.onsubmit = function (event) {\n\n  event.preventDefault();\n\n  let utterance = new SpeechSynthesisUtterance(inputTxt.value);\n  let selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');\n  for (i = 0; i < voices.length; i++) {\n    if (voices[i].name === selectedOption) {\n      utterance.voice = voices[i];\n    }\n  }\n  utterance.pitch = pitch.value;\n  utterance.rate = rate.value;\n  synth.speak(utterance);\n}\n"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "___\n"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "## Pause, Beispiel:\nBeim Aufruf von `SpeechSynthesis.pause()` wird eine Meldung zurückgegeben, die die Zeichennummer und den Namen angibt, bei denen die Sprachausgabe pausiert wurde."
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "utterance.onpause = function (event) {\n  let char = event.utterance.text.charAt(event.charIndex);\n  console.log('Speech paused at character ' + event.charIndex + ' of \"' +\n    event.utterance.text + '\", which is \"' + char + '\".');\n}\n"
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "let synth = window.speechSynthesis;\n\nlet utterance1 = new SpeechSynthesisUtterance('How about we say this now? This is quite a long sentence to say.');\nlet utterance2 = new SpeechSynthesisUtterance('We should say another sentence too, just to be on the safe side.');\n\nsynth.speak(utterance1);\nsynth.speak(utterance2);\n\nsynth.pause(); // pauses utterances being spoken\n"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "Einige Browser aktualisieren die Eigenschaft speechSynthesis.paused nicht, wenn speechSynthesis.pause() ausgeführt wird (und die Sprache korrekt angehalten wird). Sie müssen diese Zustände dann selbst verwalten.\n"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "___"
            ],
            "outputs": []
        },
        {
            "language": "markdown",
            "source": [
                "## Stop\n\nZum Anhalten der Sprachausgabe wird ein Button mit einem EventHandler verwendet"
            ],
            "outputs": []
        },
        {
            "language": "html",
            "source": [
                "<button id=\"btn-stop\">Stop</button>"
            ],
            "outputs": []
        },
        {
            "language": "javascript",
            "source": [
                "const stopBtn = document.getElementById('btn-stop');\n\n//...\n\nstopBtn.addEventListener('click', () =>{\n    speechSynthesis.cancel();\n});\n\n"
            ],
            "outputs": []
        }
    ]
}