Text in Deutsch vorlesen

Diese Datei ist defekt, d.h. am Ende abgeschnitten:

https://www.ergotherapie-wiesinger.de/Vorlesen/1/responsivevoice.js

Nun möchte ich es jedoch so haben, dass man keine Sprache auswählen kann, sondern dass die deutsche Sprache eingestellt ist und außerdem möchte ich, dass der Text in einem bestimmten div (mit einer bestimmten id) vorgelesen wird.

document.getElementById('voiceselection').value enthält den Wert der ausgewählten Sprache

<select id="voiceselection">
<!-- ... -->
<option value="Deutsch Female">Deutsch Female</option>
<!-- ... -->
</select>

Den kannst du als zweiten Parameter von responsiveVoice.speak() auch direkt einsetzen:

responsiveVoice.speak(document.getElementById('id-eines-bestimmten-divs').value, 'Deutsch Female');

... und die ID 'text' im ersten Parameter kannst du auch nach deinen Anforderungen ersetzen

Dann vergleich mal die beiden:

https://code.responsivevoice.org/responsivevoice.js

https://www.ergotherapie-wiesinger.de/Vorlesen/1/responsivevoice.js

Das zweite Script ist hinten abgeschnitten und dadurch kaputt.

Wenn du das repariert hast, kannst du die erste Version in der script.js umsetzen wie von mir beschrieben.

Ruf die Datei mal direkt im Browser auf:

https://www.ergotherapie-wiesinger.de/Vorlesen/11/responsivevoice.js

Bei mir kommt da in verschiedenen Browsern nur eine leere Datei an. Vielleicht irgendwas fehlkonfiguriert im Webserver oder der Upload per FTP funktioniert nicht korrekt?

habe auch eine Version erstellt, bei dem das Skript direkt vom Anbieter geladen wird, aber auch das funktioniert nicht
https://www.ergotherapie-wiesinger.de/Vorlesen/10/

Änder mal value auf innerText:

responsiveVoice.speak(document.getElementById('lesen').innerText, 'Deutsch Female');

Auch bei mir wird nur eine leere Datei angezeigt, wenn ich die Datei direkt aufrufe.
Kann mir das nicht erklären.

Was zeigt denn das FTP-Programm an, wie groß die Datei nach der Übertragung auf den Server ist?

Aus welchem Grund muss das innerText lauten und nicht value?

value ist der zu übertragende Inhalt eines Formular-Elements. Im ersten Beispiel wurde ja ein Textarea verwendet. Auf den Text-Inhalt eines div kann mit innerText zugegriffen werden.

Hallo Jörg,

Das vorlesen des Textes funktioniert leider nicht immer, wenn der Text ziemlich lange ist.
Leider ist der Text, den ich vorlesen lassen möchte, ziemlich lange.
Es handelt sich um den Text auf der folgenden Seite:
https://www.ergotherapie-wiesinger.de/Vorlesen/5/

Zudem haben die Leute, die die Seite bisher getestet haben, gemeint, dass es ganz sinnvoll wäre, wenn man einen pause-Knopf haben würde.

Ich habe ja schon ein Beispiel gefunden, welches auch einen pause-Knopf hat.
Und zwar das folgende:
https://www.ergotherapie-wiesinger.de/Vorlesen/2/Original/

Nur bräuchte ich wieder deine Hilfe, um das Beispiel an meine Bedürfnisse anzupassen.
Ich möchte auch hier, dass die Sprache nicht ausgewählt werden kann, sondern dass die deutsche Sprache eingestellt ist.
Und es soll der Text in einem bestimmten div vorgelesen werden.

Das Skript ist das folgende:

var init = function () {
    if (window.speechSynthesis) {
        if ("onvoiceschanged" in speechSynthesis) {
            speechSynthesis.onvoiceschanged = setVoices;
        } else {
            setVoices();
        }
    }
    let playBtn = document.getElementById("play");
    let stopBtn = document.getElementById("stop");
    let pauseBtn = document.getElementById("pause");
    let resumeBtn = document.getElementById("resume");
    playBtn.addEventListener("click", play);
    stopBtn.addEventListener("click", stopPlay);
    pauseBtn.addEventListener("click", pause);
    resumeBtn.addEventListener("click", resume);
};
var play = function () {
    var self = this;
    this.disabled = true;
    let voices = speechSynthesis.getVoices();
    let speech = new SpeechSynthesisUtterance();
    let selectedVoice = document.getElementById("voiceSelect");
    let tts = document.getElementById("textToSpeech");
    speech.text = tts.value;
    speech.voice = voices[selectedVoice.value];
    speechSynthesis.speak(speech);
    speech.onend = function () {
        self.disabled = false;
    };
};
var stopPlay = function () {
    speechSynthesis.cancel();
    let playBtn = document.getElementById("play");
    playBtn.disabled = false;
};
var pause = function () {
    if (!speechSynthesis.paused)
        speechSynthesis.pause();
};
var resume = function () {
    if (speechSynthesis.paused)
        speechSynthesis.resume();
};
var setVoices = function () {
    let voices = speechSynthesis.getVoices();
    let voicesSelect = document.getElementById("voiceSelect");
    for (let index in voices) {
        let option = document.createElement("OPTION");
        option.value = index;
        option.innerHTML = voices[index].name;
        voicesSelect.appendChild(option);
    }
};
window.onload = function () {
    init();
};

Ich als unwissender hätte die folgende Zeile

    speech.voice = voices[selectedVoice.value];

folgendermaßen abgeändert:
speech.voice = voices[selectedVoice.value,'Google Deutsch'];

Aber das funktioniert nicht.
https://www.ergotherapie-wiesinger.de/Vorlesen/21/

Und ich vermute, dass der folgende Abschnitt entfernt werden kann

var setVoices = function () {
    let voices = speechSynthesis.getVoices();
    let voicesSelect = document.getElementById("voiceSelect");
    for (let index in voices) {
        let option = document.createElement("OPTION");
        option.value = index;
        option.innerHTML = voices[index].name;
        voicesSelect.appendChild(option);
    }
};

Aber ich habe keine Ahnung wie das Skript abgeändert werden muss, damit das Ganze funktioniert.
Würde mich über deine erneute Hilfe sehr freuen.