app/enhance/pronounce.ts

Functions

Imports

It imports no other module of this repo. No module of this repo imports it.

Source

1// The pronunciation button on a dictionary entry (app/components/dictionary-entry.tsx). The server
2// renders a plain link to the clip, which works with script off; this swaps in the real button, which
3// plays the clip in place on click, Enter or Space (a native <button> gives all three). Nothing plays
4// until asked, and the clip is fetched on the first press, not before. aria-pressed carries the state
5// while it plays; a second press stops it.
6
7for (const root of document.querySelectorAll<HTMLElement>("[data-term-entry]")) {
8  const button = root.querySelector<HTMLButtonElement>("[data-term-listen]");
9  const link = root.querySelector<HTMLAnchorElement>("[data-term-audio-link]");
10  const src = button?.dataset.termListen;
11  if (!button || !link || !src) continue;
12
13  let audio: HTMLAudioElement | null = null;
14
15  const paint = (playing: boolean) => {
16    button.setAttribute("aria-pressed", String(playing));
17    button.classList.toggle("is-playing", playing);
18  };
19
20  const clip = () => {
21    if (audio) return audio;
22    const created = new Audio();
23    created.preload = "none";
24    created.src = src;
25    created.addEventListener("play", () => paint(true));
26    created.addEventListener("pause", () => paint(false));
27    created.addEventListener("ended", () => paint(false));
28    // A clip that cannot load brings the plain link back, so the reader still has a way to hear it.
29    created.addEventListener("error", () => {
30      paint(false);
31      button.hidden = true;
32      link.hidden = false;
33    });
34    audio = created;
35    return created;
36  };
37
38  button.addEventListener("click", () => {
39    const player = clip();
40    if (!player.paused) {
41      player.pause();
42      player.currentTime = 0;
43      return;
44    }
45    player.currentTime = 0;
46    player.play().catch((error: unknown) => {
47      paint(false);
48      // A second press while the first play was still starting: the reader stopped it, nothing failed.
49      if (error instanceof DOMException && error.name === "AbortError") return;
50      // A refused play is reported, not swallowed; the link stays one press away.
51      button.hidden = true;
52      link.hidden = false;
53      throw error;
54    });
55  });
56
57  link.hidden = true;
58  button.hidden = false;
59}