abdulive/apps/overlay-web/public/tts.html

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>abdulive - Vorlesen</title>
<link rel="stylesheet" href="/theme.css">
<style>
/* Die Seite zeigt fast nichts. Sie ist eine Tonquelle mit einer kleinen
 * Sichtkontrolle daneben - man soll sehen, was gerade gesprochen wird, und
 * zwar auch als Zuschauer. Wer nur hoert, was vorgelesen wird, kann nicht
 * nachlesen, wenn er es nicht verstanden hat. */
#kasten {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--tinte-klar);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: var(--schatten), var(--glanz);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .3s, transform .3s;
}
#kasten.an { opacity: 1; transform: none; }

.wer {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tuerkis);
  margin-bottom: 3px;
}
.was { font-size: 22px; line-height: 1.35; }

/* Ein Hinweis nur fuer den Fall, dass die Browser-Quelle keine Sprachausgabe
 * kann. Im Stream soll das auffallen, nicht stillschweigend fehlen. */
#fehlt {
  position: fixed;
  left: 16px; top: 16px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(239, 68, 68, .9);
  font: 600 15px/1.3 var(--font-zahl);
  max-width: 520px;
  display: none;
}
</style>
</head>
<body>
  <div id="fehlt">
    Diese Browser-Quelle kann nicht sprechen (keine Sprachausgabe eingebaut).
    Vorgelesen wird nichts.
  </div>
  <div id="kasten"><div class="wer" id="wer"></div><div class="was" id="was"></div></div>

<script src="/client.js"></script>
<script>
(function () {
  'use strict';

  var kasten = document.getElementById('kasten');
  var werEl = document.getElementById('wer');
  var wasEl = document.getElementById('was');

  var sprache = Overlay.param('sprache', 'de-DE');
  var tempo = Overlay.param('tempo', 1);
  var lautstaerke = Overlay.param('laut', 1);
  var warteschlange = [];
  var laeuft = false;

  /* Ob die Browser-Quelle ueberhaupt sprechen kann, weiss man erst zur
   * Laufzeit: OBS' eingebauter Browser wird teils ohne Sprachausgabe gebaut.
   * Ohne diese Pruefung bliebe es im Stream einfach still, und niemand wuesste
   * warum. */
  var kannSprechen = typeof window.speechSynthesis !== 'undefined' &&
                     typeof window.SpeechSynthesisUtterance !== 'undefined';
  if (!kannSprechen) {
    document.getElementById('fehlt').style.display = 'block';
    console.error('[tts] Diese Browser-Quelle hat keine Sprachausgabe.');
  }

  /* Stimmen werden asynchron geladen. Beim ersten Aufruf ist die Liste oft
   * noch leer - deshalb bei jedem Sprechen neu nachsehen statt einmal am
   * Anfang. */
  function stimme() {
    if (!kannSprechen) return null;
    var alle = window.speechSynthesis.getVoices() || [];
    var passend = alle.filter(function (v) { return v.lang && v.lang.indexOf(sprache.slice(0, 2)) === 0; });
    return passend[0] || alle[0] || null;
  }

  function zeige(name, text) {
    werEl.textContent = name;
    wasEl.textContent = text;
    kasten.classList.add('an');
  }
  function verstecke() { kasten.classList.remove('an'); }

  function naechste() {
    var n = warteschlange.shift();
    if (!n) { laeuft = false; verstecke(); return; }
    laeuft = true;
    zeige(n.name, n.text);

    if (!kannSprechen) {
      // Wenigstens anzeigen, und nach der geschaetzten Lesedauer weiter.
      setTimeout(naechste, Math.min(15000, 2000 + n.text.length * 60));
      return;
    }

    var rede = new SpeechSynthesisUtterance(n.text);
    rede.lang = sprache;
    rede.rate = tempo;
    rede.volume = lautstaerke;
    var v = stimme();
    if (v) rede.voice = v;

    var weiter = false;
    var gehWeiter = function () {
      if (weiter) return;
      weiter = true;
      setTimeout(naechste, 400);
    };
    rede.onend = gehWeiter;
    rede.onerror = function (e) {
      console.error('[tts] Sprachausgabe fehlgeschlagen', e && e.error);
      gehWeiter();
    };
    // Notbremse: bleibt die Sprachausgabe haengen, steht die Warteschlange
    // sonst fuer den Rest des Streams. Grosszuegig bemessen.
    setTimeout(gehWeiter, 5000 + n.text.length * 250);

    window.speechSynthesis.speak(rede);
  }

  Overlay.on('tts', function (ev) {
    warteschlange.push({ name: ev.name, text: ev.text });
    if (warteschlange.length > 10) warteschlange.splice(0, warteschlange.length - 10);
    if (!laeuft) naechste();
  });

  // Panikschalter: sofort still, Warteschlange weg.
  Overlay.on('still', function () {
    warteschlange.length = 0;
    if (kannSprechen) { try { window.speechSynthesis.cancel(); } catch (e) { /* egal */ } }
    laeuft = false;
    verstecke();
  });

  // Nach dem Neuverbinden NICHT nachholen: eine Nachricht von vor zehn
  // Minuten vorzulesen ist schlimmer, als sie zu verpassen.
  Overlay.on('state', function () { });
})();
</script>
</body>
</html>