Read aloud

import { A11yComponent, range } from "../../shared/base.js?v=sdou20261029";
class ReadAloud extends A11yComponent {
  static styles = new URL("./component.css?v=sdou20261029", import.meta.url).href;
  render() {
    this.mount(
      "Listen at your own pace.",
      "An optional reading voice, with clear playback controls. Your device screen reader remains available.",
      '<label class="field-label" for="local-voice">Local device voice</label><select id="local-voice" aria-describedby="voice-note"></select><p class="hint" id="voice-note">Only voices marked local by your browser are offered. This component does not send text to a speech service.</p><p class="hint" data-voice-support></p><div class="player"><div class="actions"><button type="button" class="button secondary" data-previous aria-label="Previous paragraph">Previous</button><button type="button" class="button" data-play>Read aloud</button><button type="button" class="button secondary" data-next aria-label="Next paragraph">Next</button><button type="button" class="button secondary" data-stop>Stop</button></div><progress max="1" value="0" aria-label="Reading progress"></progress><p class="hint" data-position></p></div>' +
        range("rate", "Reading speed", 0.7, 1.4, 0.1, ["Slower", "Faster"]) +
        range("volume", "Voice volume", 0, 1, 0.05, ["Quiet", "Loud"]) +
        '<p class="hint">Rate and volume changes apply to the next paragraph. Audio starts only when you choose Read aloud.</p>',
    );
  }
  initialize() {
    this.synth = window.speechSynthesis;
    this.index = 0;
    this.generation = 0;
    this.active = false;
    this.paused = false;
    this.chunks = [];
    const source =
      this.target.querySelector("[data-sdou-a11y-prose]") || this.target;
    for (const el of source.querySelectorAll("h2,h3,p,li")) {
      if (
        el.closest("[hidden],[aria-hidden=true]") ||
        !el.getClientRects().length
      )
        continue;
      let text = el.textContent.trim();
      while (text) {
        let cut = Math.min(500, text.length);
        if (cut < text.length) {
          const space = text.lastIndexOf(" ", cut);
          if (space > 100) cut = space;
        }
        this.chunks.push({ element: el, text: text.slice(0, cut) });
        text = text.slice(cut).trim();
      }
    }
    this.refreshVoices();
    this.on(this.synth, "voiceschanged", () => this.refreshVoices());
    this.on(this.q("#local-voice"), "change", () => this.stop());
    this.on(this.q("[data-play]"), "click", () => {
      if (this.active && !this.paused) {
        this.synth.pause();
        this.paused = true;
        this.say("Reading paused.");
        this.updatePlayer();
      } else if (this.active && this.paused) {
        this.synth.resume();
        this.paused = false;
        this.say("Reading resumed.");
        this.updatePlayer();
      } else this.play();
    });
    this.on(this.q("[data-stop]"), "click", () => {
      this.stop();
      this.say("Reading stopped.");
    });
    this.on(this.q("[data-next]"), "click", () => this.jump(1));
    this.on(this.q("[data-previous]"), "click", () => this.jump(-1));
    this.updatePlayer();
  }
  refreshVoices() {
    const selected = this.q("#local-voice").value;
    this.voices =
      this.synth?.getVoices().filter((voice) => voice.localService === true) ||
      [];
    const select = this.q("#local-voice");
    select.replaceChildren();
    if (!this.voices.length) {
      const option = document.createElement("option");
      option.textContent = "No local voice available";
      select.append(option);
    } else
      for (const [index, voice] of this.voices.entries()) {
        const option = document.createElement("option");
        option.value = String(index);
        option.textContent = voice.name + " · " + voice.lang;
        select.append(option);
      }
    if ([...select.options].some((o) => o.value === selected))
      select.value = selected;
    select.disabled = !this.voices.length;
    this.q("[data-voice-support]").textContent = this.voices.length
      ? "Local voice available. Choose a voice, then start reading."
      : "This browser has no local speech voice available. Use your device reading tools, or enable a local voice in your system settings.";
    this.updatePlayer();
  }
  play() {
    if (!this.voices?.length || !this.chunks.length) return;
    const chunk = this.chunks[this.index],
      token = ++this.generation;
    this.synth.cancel();
    this.active = true;
    this.paused = false;
    const utterance = new SpeechSynthesisUtterance(chunk.text);
    utterance.voice = this.voices[Number(this.q("#local-voice").value) || 0];
    utterance.rate = this.preferences.state.rate;
    utterance.volume = this.preferences.state.volume;
    this.clearHighlight();
    chunk.element.setAttribute("data-sdou-a11y-speaking", "");
    utterance.onend = () => {
      if (token !== this.generation) return;
      this.clearHighlight();
      if (this.index < this.chunks.length - 1) {
        this.index++;
        this.play();
      } else {
        this.active = false;
        this.say("Reading complete.");
        this.updatePlayer();
      }
    };
    utterance.onerror = (event) => {
      if (
        token !== this.generation ||
        event.error === "canceled" ||
        event.error === "interrupted"
      )
        return;
      this.active = false;
      this.clearHighlight();
      this.fail(
        "The local voice could not read this passage. Your other reading controls still work.",
      );
      this.updatePlayer();
    };
    this.synth.speak(utterance);
    this.say(
      "Reading passage " + (this.index + 1) + " of " + this.chunks.length + ".",
    );
    this.updatePlayer();
  }
  jump(delta) {
    const wasActive = this.active;
    this.stop();
    this.index = Math.max(
      0,
      Math.min(this.chunks.length - 1, this.index + delta),
    );
    if (wasActive) this.play();
    else {
      this.say("Passage " + (this.index + 1) + " selected.");
      this.updatePlayer();
    }
  }
  stop() {
    this.generation++;
    if (this.active) this.synth?.cancel();
    this.active = false;
    this.paused = false;
    this.clearHighlight();
    this.updatePlayer();
  }
  clearHighlight() {
    this.target
      ?.querySelectorAll("[data-sdou-a11y-speaking]")
      .forEach((el) => el.removeAttribute("data-sdou-a11y-speaking"));
  }
  updatePlayer() {
    if (!this.q("[data-play]")) return;
    const usable = !!this.voices?.length && !!this.chunks?.length;
    this.q("[data-play]").disabled = !usable;
    this.q("[data-play]").textContent = this.active
      ? this.paused
        ? "Continue"
        : "Pause"
      : "Read aloud";
    this.q("[data-stop]").disabled = !this.active;
    this.q("[data-previous]").disabled = !usable || this.index <= 0;
    this.q("[data-next]").disabled =
      !usable || this.index >= this.chunks.length - 1;
    this.q("progress").max = Math.max(1, this.chunks?.length || 1);
    this.q("progress").value = this.active ? this.index + 1 : this.index || 0;
    this.q("[data-position]").textContent = this.chunks?.length
      ? "Passage " + ((this.index || 0) + 1) + " of " + this.chunks.length
      : "No readable passages found.";
  }
  cleanup() {
    this.stop();
  }
}
customElements.define("sdou-read-aloud", ReadAloud);