Lauschen und erste JS-Interaktivität

In dieser Übung verknüpfst du Audio, CSS-Animation und ein erstes JavaScript-Verhalten. So entsteht eine saubere, reproduzierbare Anleitung für einen hörbaren und interaktiven Abschnitt.

Lauschen-Bereich in HTML aufbauen

  1. Section anlegen: Erzeuge unterhalb deiner letzten Section in der index.html eine neue Section mit der ID lauschen und einem inner-wrapper.

  2. Animation, Audio und Button einfügen: Nutze diese Grundstruktur mit eindeutigem Audio-Element für JavaScript. Den Dateinamen kannst du frei wählen, wichtig ist nur ein passender src-Pfad.

    <section id="lauschen" class="abschnitt">
  <div class="inner-wrapper">
    <div class="lausch-animation" aria-hidden="true"></div>

    <figure>
      <audio id="lauschen-audio" src="/audio/mein-gartenklang.mp3" controls></audio>
    </figure>

    <button type="button" class="button-vollbild" aria-pressed="false">Vollbild</button>
  </div>
</section>

    HTML

CSS-Animation für die Stimmung

  1. Basisstil für die Fläche: Lege eine sichtbare Animationsfläche an.

    .lausch-animation {
  width: 100%;
  height: 300px;
  background-color: #9d8771;
  border: var(--rahmen);
}

@keyframes lauschen {
  0% { background-color: #9d8771; }
  10% { background-color: #7a5f4b; }
  20% { background-color: #004e9d; }
  30% { background-color: #0a7db8; }
  40% { background-color: #1f9d8a; }
  50% { background-color: #6cbf57; }
  60% { background-color: #d0a63c; }
  70% { background-color: #c76b32; }
  80% { background-color: #a3474b; }
  90% { background-color: #7b4fa3; }
  100% { background-color: #bcb1aa; }
}

.lausch-animation.is-playing {
  animation: lauschen 10s infinite;

}

.lausch-animation.is-fullscreen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
}

    CSS

  2. Verändere Dauer und Reihenfolge der Farben, bis die Wirkung zur Audio-Datei passt.

Erste JS-Interaktivität: Play/Pause und Vollbild

  1. Animation an Audio koppeln: Beim Abspielen startet die Animation, beim Pausieren stoppt sie.

  2. Vollbild-Button aktivieren: Per Klick wird die Animationsfläche per position: fixed und z-index über das ganze Fenster gelegt. Der echte Browser-Vollbildmodus ist ein optionaler Bonus.

    const audio = document.querySelector("#lauschen-audio");
const animation = document.querySelector(".lausch-animation");
const vollbildButton = document.querySelector(".button-vollbild");

if (audio && animation && vollbildButton) {
  audio.addEventListener("play", () => {
    animation.classList.add("is-playing");
  });

  audio.addEventListener("pause", () => {
    animation.classList.remove("is-playing");
  });

  audio.addEventListener("ended", () => {
    animation.classList.remove("is-playing");
  });

  vollbildButton.addEventListener("click", async () => {
    const istVollbild = animation.classList.toggle("is-fullscreen");
    vollbildButton.setAttribute("aria-pressed", String(istVollbild));
    vollbildButton.textContent = istVollbild ? "Vollbild verlassen" : "Vollbild";

    // Optional: echter Browser-Vollbildmodus als Zusatz
    if (!document.fullscreenEnabled) {
      return;
    }

    try {
      if (istVollbild && document.fullscreenElement !== animation) {
        await animation.requestFullscreen();
      }

      if (!istVollbild && document.fullscreenElement) {
        await document.exitFullscreen();
      }
    } catch {
      // Wenn Fullscreen vom Browser blockiert wird, bleibt das CSS-Overlay aktiv.
    }
  });
}

    JavaScript

  3. Wichtig: Das CSS-Overlay funktioniert immer. Echter Browser-Fullscreen funktioniert nur nach einer direkten Nutzeraktion (z. B. Button-Klick) und kann je nach Browser eingeschränkt sein.

Checkliste vor dem Upload