hide prompt speech

Author: gyt1145028706

script.js

@@ -134,13 +134,41 @@ function el(tag, className, text) {
   return node;
 }
 
-function createAudioPanel(label, src) {
+function createAudioPanel(label, src, options = {}) {
+  const { collapsible = false } = options;
   const wrap = el("div", "audio-panel");
-  const lbl  = el("p", "audio-label", label);
   const audio = document.createElement("audio");
   audio.controls = true;
   audio.preload  = "none";
   audio.src      = src;
+
+  if (collapsible) {
+    wrap.classList.add("audio-panel-collapsible");
+    audio.hidden = true;
+
+    const toggle = document.createElement("button");
+    toggle.type = "button";
+    toggle.className = "audio-label audio-label-button";
+    toggle.textContent = label;
+    toggle.setAttribute("aria-expanded", "false");
+    toggle.setAttribute("aria-label", `Show ${label.toLowerCase()} audio`);
+    toggle.addEventListener("click", () => {
+      const isExpanded = toggle.getAttribute("aria-expanded") === "true";
+      const nextExpanded = !isExpanded;
+      audio.hidden = !nextExpanded;
+      toggle.setAttribute("aria-expanded", String(nextExpanded));
+      toggle.setAttribute(
+        "aria-label",
+        `${nextExpanded ? "Hide" : "Show"} ${label.toLowerCase()} audio`,
+      );
+      if (!nextExpanded) audio.pause();
+    });
+
+    wrap.append(toggle, audio);
+    return wrap;
+  }
+
+  const lbl = el("p", "audio-label", label);
   wrap.append(lbl, audio);
   return wrap;
 }
@@ -172,7 +200,7 @@ function createSampleCard(sample, index) {
   // Body
   card.append(
     header,
-    createAudioPanel("Prompt speech", sample.promptSpeech),
+    createAudioPanel("Prompt speech", sample.promptSpeech, { collapsible: true }),
     createTextPanel(sample.text),
     createAudioPanel("Generated speech", sample.generatedSpeech),
   );

styles.css

@@ -668,6 +668,29 @@ h3 {
   letter-spacing: 0.1em;
 }
 
+.audio-label-button {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  text-align: left;
+  width: fit-content;
+  cursor: pointer;
+  transition: color 140ms, opacity 140ms, text-decoration-color 140ms;
+}
+
+.audio-label-button:hover {
+  color: var(--text);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.audio-label-button[aria-expanded="true"] {
+  color: var(--text);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
 .text-panel {
   background: rgba(44, 37, 30, 0.04);
   border-radius: 6px;