Ich habe mir nicht alle Beiträge im Thema durchgelesen. Grundsätzlich finde ich die Idee gut, sich längere Beiträge vorlesen zu lassen und wie es hier im Forum umgesetzt ist. Ich habe aber zwei Kommentare zu der Lösung.
1. Auf meinem Macbook stürzt Chrome beim Vorlesen von längeren Beiträgen ab. Das erste Mal, nachdem ich auf "Vorlesen" geklickt habe, kommt Stille. Beim zweiten Mal stürzt Chrome komplett ab - nicht nur der eine Tab, wo jeder Tab doch eigentlich vom Prozess her isoliert ist. Dann öffnet sich ein Fenster von Apple, mit dem Hinweis, dass Chrome abgestürzt ist, und dass ich das doch bitte melden soll. Ich habe den Fehler vor ein paar Wochen in diesem "Absturz-Fenster" gemeldet.
Ich habe es vor ein paar Tagen ausprobiert und möchte es jetzt nicht noch einmal ausprobieren. Ich denke aber, dass der Fehler weiterhin auftritt.
Ich glaube nicht, dass es etwas ist, was wir beheben können.
2. Die Stimmen sind auf jedem Gerät unterschiedlich. Auf meinem Macbook versucht eine italienische Stimme, den Text zu lesen und mein Linux-PC spricht Englisch. Nur mein Android-Smartphone spricht Deutsch. Wenn man sich anstrengt, kann man den Text verstehen, aber das sollte nicht Sinn der Sache sein.
Ich sehe hier folgenden JavaScript-Code auf der Seite:
Ich glaube, das Problem wird durch die Zeile mit "voices[Stimme]" erzeugt. Hier wird eine feste Stimme festgelegt, die pro Betriebssystem unterschiedliche Sprachen spricht. Stimme 2 ist bei mir eine italienische Stimme: Wenn ich die Zeile "message10.voice = voices[Stimme];" entferne und in der Browser-Konsole eingebe, spricht der Browser Deutsch mit mir.
Vielleicht wäre es denkbar, die Zeile mit der festen Stimme zu entfernen und stattdessen das Betriebssystem die Stimme anhand der Sprache wählen zu lassen? Mit der Zeile "message10.lang = "de-DE"; " wird schon die passende Sprache ausgewählt.
Hallo Creator, "SpeechSynthesisUtterance" ist noch nicht ausgereift und steckt in den Kinderschuhen! Ich wollte trotzdem zeigen, was möglich ist!
Es ist zurzeit kaum möglich eine Gleichheit hinzubekommen! Verschiedene Browser und verschiedene Endgeräte erschweren das Testen ohne Ende. Hinzu kommt noch, dass es mal funktioniert und mal nicht!
Es gibt eine "Default-Stimme", wenn die Sprachauswahl nicht verfügbar ist! Habe die Sprachauswahl hier im Forum erstmal herausgenommen. Hoffe, dass es auf dem Macbook jetzt besser funktioniert!
Ich habe mich von deinem Update zu unserem Projekt total inspirieren lassen! Dass du die ungenutzten SVG-Filter so extrem minimiert hast, war der perfekte Anstoß, um noch einmal ganz neu über die Robots nachzudenken.
Ich hatte eine Idee, wie wir die beiden größten Schwachstellen von damals (die unnatürliche Stimme und die starren Mundbewegungen) mit modernsten Kniffen lösen können – und zwar komplett kostenlos, server- und CPU-schonend!
Hier ist mein Entwurf für das neue Familienmitglied Yara als Inspiration und Idee, wie die Roboter im Jahr 2026 aussehen und klingen könnten:
1. Der Durchbruch bei der Sprachausgabe (Sanft & Menschlich) Du hattest absolut recht: Die Standard-Sprachausgabe im Browser klingt oft sehr gehetzt und künstlich. Ich habe im JavaScript zwei "Tuning-Regler" eingebaut: m.rate (Geschwindigkeit auf 0.95 gedrosselt) und m.pitch (Tonhöhe leicht angehoben auf 1.1).
Das Ergebnis ist verblüffend! Die Engine wird gezwungen, den Text viel ruhiger, gelassener und freundlicher zu betonen. Gerade im Firefox hört sich das unglaublich angenehm und menschlich an!
2. Der neue Equalizer-Mund (Ressourcenschonend) Passend zu deiner Code-Minimierung habe ich die Mund-Schnittstelle komplett umgebaut. Statt einer einzelnen Linie oder schweren SVGs besteht der Mund nun aus 4 kompakten Frequenzbalken. Sobald Yara spricht, tanzen diese Balken völlig asynchron und unregelmäßig hoch und runter – wie ein echtes, technisches Display.
3. Volle Hardware-Beschleunigung für die CPU Damit die Animationen das Forum nicht ausbremsen, nutzt das CSS jetzt den Befehl will-change: transform. Das bedeutet: Die Berechnung der Mundbewegung wird vom Browser direkt an die Grafikkarte (GPU) übergeben. Die CPU des Nutzers wird komplett entlastet und alles läuft absolut ruckelfrei.
Hier ist der komplette Code für das Yara-Konzept zum Ausprobieren und Testen:
<script> document.addEventListener("DOMContentLoaded", () => { const container = document.getElementById("family_robot_container"); const bubble = document.getElementById("family_bubble"); const s = window.speechSynthesis; let m = new SpeechSynthesisUtterance();
m.text = ` Hallo, ich bin Yara Ihr Forum-Roboter. Herzlich Willkommen hier im Loreths-Forum. Schön, dass du da bist. Dieses Forum lebt durch wunderbare Menschen wie dich, die es zu einem warmen und freundlichen Ort machen. Genieß deine Zeit hier. Viele Grüße von Eurem fleißigen Forum Roboter. `;
// Das Stimmen-Tuning für ein entspanntes Sprechen m.rate = 0.95; m.pitch = 1.1;
function stopSpeaking() { container.classList.remove("robot_speaking"); bubble.innerHTML = "Ich kann sprechen!<br>Klicke mich einfach an!"; } m.onend = stopSpeaking; m.onerror = stopSpeaking;
container.addEventListener("click", () => { if (s.speaking) { s.cancel(); stopSpeaking(); } else { container.classList.add("robot_speaking"); bubble.innerHTML = "Ich erzähle dir gerade etwas Schönes..."; s.speak(m);
setTimeout(() => { if (container.classList.contains("robot_speaking") && !s.speaking) { bubble.innerHTML = "<span style='color:red;'>Wenn Du mich hören willst, schalte bitte die Lautsprecher an oder erlaube Audio für diese Seite!</span>"; } }, 400); } }); }); </script>
Was meinst du zu der Idee mit dem Frequenz-Mund und dem Stimmen-Tuning? Ich finde, so machen die Robots heute richtig Eindruck und bringen frischen Wind rein!
<script> document.addEventListener("DOMContentLoaded", () => { const box = document.getElementById("robotBox"); const bubble = document.getElementById("bubbleTxt"); const s = window.speechSynthesis; let u = new SpeechSynthesisUtterance(); let currentMouth = "mA"; let isSpeaking = false;
/* --- Text --- */ u.text = ` Hallo ich bin Yara, willkommen im Forum. Ich bin dein Forum-Roboter und helfe Dir gerne. Klicke einen der unteren Button an, um mich mit einem anderen Mund sprechen zu lassen. `; // Geschwindigkeit, Tonhöhe u.rate = 0.95; u.pitch = 1.1;
/* --- Stimme wählen --- */ function pickVoice(){ const voices = s.getVoices(); let v = voices.find(v => v.lang && v.lang.startsWith("de")) || voices[0]; if (v) u.voice = v; // 0= default, 1= Hedda, 2= Stefan } pickVoice(); s.onvoiceschanged = pickVoice;
Der Treffpunkt für Hilfe, Tricks & Tipps
»
XOBOR-Foren und Homepages
»
13.03.2023 14:15 (zuletzt bearbeitet: 13.03.2023 14:32)
Foren Spende
Direkt zu PayPal
Thema drucken
Antworten
