Zur Navigation

Text in Deutsch vorlesen

1 Tim (Gast)

Hallo und guten Tag,

Ich habe zwei Beispiele gefunden, mit denen man einen Text auf einer Webseite vorlesen lassen kann.
Und zwar die folgenden beiden:
https://www.ergotherapie-wiesinger.de/Vorlesen/1/Original
https://www.ergotherapie-wiesinger.de/Vorlesen/2/Original


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.

Leider kenne ich mich gar nicht mit JavaSkript aus und so habe ich nur das folgende bewerkstelligen können, was aber nicht funktioniert:

https://www.ergotherapie-wiesinger.de/Vorlesen/1
https://www.ergotherapie-wiesinger.de/Vorlesen/2

Würde mich sehr freuen, wenn mir jemand helfen könnte.
Vielen Dank schon mal

Gruß, Tim

24.06.2021 08:22

2 Jörg

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

24.06.2021 09:08 | geändert: 24.06.2021 09:11

3 Tim (Gast)

Hallo Jörg,

Vielen Dank für deine Antwort!

dass das Skript im ersten Beispiel defekt ist, überrascht mich schon, denn das Beispiel (also das Original) funktioniert.

Habe mich dann an der zweiten Version versucht.
Habe die Sprache mit Google deutsch angegeben, aber ich weiß nicht, ob ich die richtige Stelle genommen habe.
Es funktioniert jedenfalls nicht
https://www.ergotherapie-wiesinger.de/Vorlesen/21

Weiß auch nicht, ob ich vom Skript etwas bezüglich der Sprachauswahl entfernen kann oder sogar muss.
Wäre schön, wenn du mir helfen könntest.

24.06.2021 10:00

4 Jörg

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.

24.06.2021 10:09 | geändert: 24.06.2021 10:15

6 Jörg

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');

24.06.2021 11:15

7 Tim (Gast)

Hallo Jörg

Recht herzlichen Dank für deine Hilfe und deine Bemühungen!
Sehr nett von dir!

Auch bei mir wird nur eine leere Datei angezeigt, wenn ich die Datei direkt aufrufe.
Kann mir das nicht erklären.
Auf der Festplatte hat die Datei den gewünschten Inhalt.

Habe die von dir vorgeschlagene Änderung vorgenommen und es funktioniert!
https://www.ergotherapie-wiesinger.de/Vorlesen/12B/

Freut mich sehr.
Vielen vielen Dank dafür!

Aus welchem Grund muss das innerText lauten und nicht value?

24.06.2021 14:32

8 Jörg

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.

24.06.2021 14:58

9 Tim (Gast)

die Datei hat nach der Übertragung auf den Server eine Größe von 0

Bei allen anderen Dateien stimmt alles.

Danke für deine Erklärung

Und nochmals vielen Dank für deine Hilfe!

24.06.2021 15:10

10 Tim (Gast)

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.

28.06.2021 13:44