Klang sehen

## Klang wird sichtbar — Produktionsprompt

Erstelle **„Klang wird sichtbar“**, ein hochwertiges, öffentlich zugängliches interaktives Wissenschaftserlebnis mit **Three.js**. Verwandle Klang in schöne, reaktionsfähige 3D-Formen, die jeder ohne musikalische oder wissenschaftliche Vorkenntnisse erkunden kann. Liefere eine **bereitgestellte Website** und ein **cinematisches MP4-Showcase-Video**.

Das Erlebnis soll sich wie ein hochwertiges interaktives Wissenschaftsmuseum anfühlen: visuell eindrucksvoll, sofort verständlich, spielerisch und wissenschaftlich korrekt. Gestalte es für ein breites Publikum auf Desktop und Mobilgeräten.

### ERSTES ERLEBNIS

Beginne mit einer leuchtenden, sich langsam bewegenden Klangskulptur vor tiefdunklem Mitternachtshintergrund. Verwende warme elfenbeinfarbene Typografie sowie Akzente in elektrischem Cyan, Violett und dezentem Korallton. Halte die Komposition elegant und die Oberfläche minimal.

Zeige die Überschrift **„Sieh, was Klang kann.“** Biete drei klare Einstiegsmöglichkeiten:

- **Einen Klang abspielen** — starte sofort ein kuratiertes Audiobeispiel samt Visualisierung.
- **Mein Mikrofon verwenden** — visualisiere die Stimme oder Umgebungsgeräusche des Nutzers.
- **Audio hochladen** — erkunde eine lokale Audiodatei.

Lass Besucher mit einem Klick etwas Überzeugendes erleben. Stelle integrierte Beispiele bereit, damit der Mikrofonzugriff und das Hochladen von Dateien optional bleiben. Führe vor der Wiedergabe eine eindeutig gekennzeichnete stumme Vorschau aus.

### DREI WEGE ZUM ERKUNDEN

**1. Klangskulptur — künstlerische Audiovisualisierung**

Erstelle ein skulpturales Feld aus Partikeln und fließenden Bändern, das flüssig auf die Live-Audioanalyse reagiert. Ordne niedrigen Frequenzen großräumige Bewegungen, mittleren Frequenzen strukturelle Details und hohen Frequenzen feine schimmernde Akzente zu. Lass die Lautstärke Maßstab und Energie ohne abrupte Sprünge beeinflussen.

Gib Sprache, Klatschen, Summen und Musik sichtbar unterschiedliche Reaktionen. Kennzeichne diesen Modus als künstlerische Interpretation von Klang.

**2. Wellen-Explorer — das Signal verstehen**

Zeige eine animierte Wellenform neben einem Frequenzspektrum, optional mit räumlicher Darstellung. Erkläre einfach: Die Wellenform zeigt, wie sich das Signal über die Zeit verändert; das Spektrum zeigt seinen Frequenzgehalt.

Füge einen interaktiven Tongenerator mit klar beschrifteten Reglern für Frequenz und Lautstärke hinzu. Nutzer sollen einen reinen Ton mit einem obertonreicheren Ton vergleichen und den Unterschied sehen können. Verwende eine sanfte Standardlautstärke, weiche Audioübergänge und eine gut erkennbare Stoppsteuerung. Erkläre, dass die visuelle Amplitude den Pegel des Eingangssignals und nicht eine kalibrierte physikalische Lautstärke darstellt.

**3. Resonanzmuster — Schwingungen erkunden**

Zeige eine virtuelle vibrierende Platte mit sandähnlichen Partikeln, die Knotenlinienmuster bilden. Stelle mehrere sorgfältig umgesetzte Schwingungsmodi bereit, die Nutzer durch Ändern der Anregungsfrequenz erkunden können.

Stütze die Muster auf ein dokumentiertes Plattenmodell mit definierter Geometrie und Randbedingungen. Erkläre, dass sich Partikel nahe Bereichen minimaler Schwingung sammeln. Kennzeichne das Erlebnis als Bildungssimulation und beschreibe seine Vereinfachungen. Halte dekorative Effekte visuell deutlich vom wissenschaftlichen Modell getrennt.

### ENTDECKEN EINFACH MACHEN

Biete kurze, kontextbezogene Einladungen wie **„Summ einen gleichmäßigen Ton“, „Klatsch einmal“** und **„Vergleiche einen tiefen Ton mit einem hohen Ton.“** Verknüpfe jede mit einer sofort sichtbaren Reaktion.

Halte erweiterte Steuerelemente eingeklappt. Stelle Bedienelemente für Pause, Zurücksetzen, Vollbild, Empfindlichkeit und Bewegungsintensität bereit. Bewahre beim Wechseln der Modi eindeutige Zustände für Audioquelle und Wiedergabe. Gib für jeden Modus eine kurze, barrierefreie Erklärung, ohne die Szene zu verdecken.

### AUDIO UND DATENSCHUTZ

Verwende die **Web Audio API** für Wiedergabe und Analyse mit stabiler Glättung und sinnvoller Normalisierung. Frage erst nach Mikrofonzugriff, nachdem der Nutzer ihn ausgewählt hat. Verarbeite Mikrofoneingaben und hochgeladene Dateien lokal; lade Audio nicht hoch, speichere es nicht und übertrage es nicht. Gestalte alle drei Modi im Polarlichtdesign neu: Füge dem Mitternachtshintergrund einen langsam wandernden grün-violetten Polarlichtverlauf hinzu, färbe die Partikel und Bänder der Klangskulptur in Türkis und Violett und gib den Körnern der Resonanzmuster ein schwaches kaltes Leuchten. Behalte den elfenbeinfarbenen Text bei, verringere die Gesamthelligkeit für die Stimmung einer nächtlichen Himmelsbeobachtung und lasse alle Interaktionen unverändert. Zeige eine permanente Mikrofonanzeige und ein deutliches Bedienelement **„Mikrofon stoppen“**, das das Mikrofon freigibt. Deaktiviere die Mikrofonüberwachung über Lautsprecher, um Rückkopplungen zu verhindern. Behandle verweigerte Berechtigungen, nicht verfügbare Geräte, nicht unterstützte Dateien, Stille und unterbrochenes Audio angemessen.

Verwende verifizierte CC0-Audiodateien oder integriertes Audio mit geeigneter Lizenz und füge ein Verzeichnis der Asset-Lizenzen bei.

### VISUELLE UND TECHNISCHE QUALITÄT

Verwende hochwertige Partikeldarstellung, überzeugende Tiefe, kontrollierten Bloom, flüssige Animationen und zurückhaltende Kamerabewegungen. Halte Text scharf und Bedienelemente gut lesbar. Vermeide aggressives Flackern und übermäßiges visuelles Rauschen.

Erstelle eine wartbare Three.js-Anwendung mit GPU-effizienter Geometrie und Shadern, wiederverwendbaren Puffern, begrenzter Pixeldichte, adaptiven Partikelzahlen und Qualitätsvorgaben. Analysiere Audio lokal, sodass gleichzeitige Besucher keine serverseitige Audioverarbeitung benötigen. Stelle optimierte statische Assets über CDN-kompatibles Hosting bereit.

Strebe flüssige Desktop-Leistung und brauchbare Leistung auf Mittelklasse-Smartphones an. Miss auf den getesteten Geräten die tatsächliche Bildrate, Speichernutzung und das Ladeverhalten. Pausiere unnötiges Rendering, wenn die Seite ausgeblendet ist, und gib Audio- und GPU-Ressourcen ordnungsgemäß frei.

Unterstütze Touch, Tastaturnavigation, sichtbare Fokuszustände, für Screenreader zugängliche Steuerelemente und reduzierte Bewegung. Stelle einen schlanken 2D-Fallback bereit, wenn WebGL nicht verfügbar ist. Stelle sicher, dass wesentliche Informationen nicht allein über Farbe oder Audio verständlich sind.

### LIEFERUMFANG

Stelle die fertige Website unter einer funktionierenden öffentlichen **HTTPS URL** bereit.

Erstelle ein herunterladbares **30–45-sekündiges H.264 MP4 in 1920 × 1080** mit synchronisiertem lizenziertem Audio, das aus der tatsächlichen Anwendung gerendert wurde. Zeige, wie ein reiner Ton zu einer Wellenform wird, ein obertonreicherer Klang die Skulptur verändert und eine Folge von Resonanzmustern. Verwende deterministische Wiedergabe und stabile Frame-Aufnahme für saubere Ergebnisse.

Liefere das Quellprojekt, lokale Assets, das Lizenzverzeichnis, dokumentierte wissenschaftliche Modelle und Visualisierungszuordnungen, Bereitstellungsanweisungen sowie einen kompakten Prüfbericht. Teste das bereitgestellte Erlebnis in Desktop- und Mobil-Layouts, die Abläufe für Mikrofonberechtigungen, Audiowiedergabe, Uploads, Moduswechsel, Barrierefreiheit und Videowiedergabe. Gib getestete Umgebungen und verbleibende Einschränkungen präzise an.

**NICHT EINSCHLIESSEN:** dekorative Effekte, die als physikalische Simulationen präsentiert werden, Mikrofonberechtigungsanfragen beim Laden der Seite, Audio-Uploads an einen Server, automatisch startenden Ton, Lautsprecherrückkopplungen, überladene Steuerelemente, schnelles Flackern, unleserliche Beschriftungen, Platzhalterfunktionen, fehlerhafte Mobil-Layouts, Wasserzeichen oder unbelegte Behauptungen zur Produktionsreife.

## Klang wird sichtbar — Produktionsprompt

Erstelle **„Klang wird sichtbar“**, ein hochwertiges, öffentlich zugängliches interaktives Wissenschaftserlebnis mit **Three.js**. Verwandle Klang in schöne, reaktionsfähige 3D-Formen, die jeder ohne musikalische oder wissenschaftliche Vorkenntnisse erkunden kann. Liefere eine **bereitgestellte Website** und ein **cinematisches MP4-Showcase-Video**.

Das Erlebnis soll sich wie ein hochwertiges interaktives Wissenschaftsmuseum anfühlen: visuell eindrucksvoll, sofort verständlich, spielerisch und wissenschaftlich korrekt. Gestalte es für ein breites Publikum auf Desktop und Mobilgeräten.

### ERSTES ERLEBNIS

Beginne mit einer leuchtenden, sich langsam bewegenden Klangskulptur vor tiefdunklem Mitternachtshintergrund. Verwende warme elfenbeinfarbene Typografie sowie Akzente in elektrischem Cyan, Violett und dezentem Korallton. Halte die Komposition elegant und die Oberfläche minimal.

Zeige die Überschrift **„Sieh, was Klang kann.“** Biete drei klare Einstiegsmöglichkeiten:

- **Einen Klang abspielen** — starte sofort ein kuratiertes Audiobeispiel samt Visualisierung.
- **Mein Mikrofon verwenden** — visualisiere die Stimme oder Umgebungsgeräusche des Nutzers.
- **Audio hochladen** — erkunde eine lokale Audiodatei.

Lass Besucher mit einem Klick etwas Überzeugendes erleben. Stelle integrierte Beispiele bereit, damit der Mikrofonzugriff und das Hochladen von Dateien optional bleiben. Führe vor der Wiedergabe eine eindeutig gekennzeichnete stumme Vorschau aus.

### DREI WEGE ZUM ERKUNDEN

**1. Klangskulptur — künstlerische Audiovisualisierung**

Erstelle ein skulpturales Feld aus Partikeln und fließenden Bändern, das flüssig auf die Live-Audioanalyse reagiert. Ordne niedrigen Frequenzen großräumige Bewegungen, mittleren Frequenzen strukturelle Details und hohen Frequenzen feine schimmernde Akzente zu. Lass die Lautstärke Maßstab und Energie ohne abrupte Sprünge beeinflussen.

Gib Sprache, Klatschen, Summen und Musik sichtbar unterschiedliche Reaktionen. Kennzeichne diesen Modus als künstlerische Interpretation von Klang.

**2. Wellen-Explorer — das Signal verstehen**

Zeige eine animierte Wellenform neben einem Frequenzspektrum, optional mit räumlicher Darstellung. Erkläre einfach: Die Wellenform zeigt, wie sich das Signal über die Zeit verändert; das Spektrum zeigt seinen Frequenzgehalt.

Füge einen interaktiven Tongenerator mit klar beschrifteten Reglern für Frequenz und Lautstärke hinzu. Nutzer sollen einen reinen Ton mit einem obertonreicheren Ton vergleichen und den Unterschied sehen können. Verwende eine sanfte Standardlautstärke, weiche Audioübergänge und eine gut erkennbare Stoppsteuerung. Erkläre, dass die visuelle Amplitude den Pegel des Eingangssignals und nicht eine kalibrierte physikalische Lautstärke darstellt.

**3. Resonanzmuster — Schwingungen erkunden**

Zeige eine virtuelle vibrierende Platte mit sandähnlichen Partikeln, die Knotenlinienmuster bilden. Stelle mehrere sorgfältig umgesetzte Schwingungsmodi bereit, die Nutzer durch Ändern der Anregungsfrequenz erkunden können.

Stütze die Muster auf ein dokumentiertes Plattenmodell mit definierter Geometrie und Randbedingungen. Erkläre, dass sich Partikel nahe Bereichen minimaler Schwingung sammeln. Kennzeichne das Erlebnis als Bildungssimulation und beschreibe seine Vereinfachungen. Halte dekorative Effekte visuell deutlich vom wissenschaftlichen Modell getrennt.

### ENTDECKEN EINFACH MACHEN

Biete kurze, kontextbezogene Einladungen wie **„Summ einen gleichmäßigen Ton“, „Klatsch einmal“** und **„Vergleiche einen tiefen Ton mit einem hohen Ton.“** Verknüpfe jede mit einer sofort sichtbaren Reaktion.

Halte erweiterte Steuerelemente eingeklappt. Stelle Bedienelemente für Pause, Zurücksetzen, Vollbild, Empfindlichkeit und Bewegungsintensität bereit. Bewahre beim Wechseln der Modi eindeutige Zustände für Audioquelle und Wiedergabe. Gib für jeden Modus eine kurze, barrierefreie Erklärung, ohne die Szene zu verdecken.

### AUDIO UND DATENSCHUTZ

Verwende die **Web Audio API** für Wiedergabe und Analyse mit stabiler Glättung und sinnvoller Normalisierung. Frage erst nach Mikrofonzugriff, nachdem der Nutzer ihn ausgewählt hat. Verarbeite Mikrofoneingaben und hochgeladene Dateien lokal; lade Audio nicht hoch, speichere es nicht und übertrage es nicht. Mache aus dem Erlebnis eine Unterrichtshilfe für Physik in der Mittelstufe: Beschrifte Wellenlänge, Amplitude und Frequenz in den Modi für Wellenform und Spektrum mit ihren chinesischen Fachbezeichnungen und Einheiten und erkläre stehende Wellen und Knoten im Resonanzmodus mit einem kurzen Diagramm. Beginne jeden Modus mit einer Einführung für den Unterricht mit höchstens 60 chinesischen Zeichen und schließe ihn mit einer Multiple-Choice-Frage ab, die direkt auf der Seite beantwortet wird; eine richtige Antwort schaltet den nächsten Schwingungsmodus frei. Zeige eine permanente Mikrofonanzeige und ein deutliches Bedienelement **„Mikrofon stoppen“**, das das Mikrofon freigibt. Deaktiviere die Mikrofonüberwachung über Lautsprecher, um Rückkopplungen zu verhindern. Behandle verweigerte Berechtigungen, nicht verfügbare Geräte, nicht unterstützte Dateien, Stille und unterbrochenes Audio angemessen.

Verwende verifizierte CC0-Audiodateien oder integriertes Audio mit geeigneter Lizenz und füge ein Verzeichnis der Asset-Lizenzen bei.

### VISUELLE UND TECHNISCHE QUALITÄT

Verwende hochwertige Partikeldarstellung, überzeugende Tiefe, kontrollierten Bloom, flüssige Animationen und zurückhaltende Kamerabewegungen. Halte Text scharf und Bedienelemente gut lesbar. Vermeide aggressives Flackern und übermäßiges visuelles Rauschen.

Erstelle eine wartbare Three.js-Anwendung mit GPU-effizienter Geometrie und Shadern, wiederverwendbaren Puffern, begrenzter Pixeldichte, adaptiven Partikelzahlen und Qualitätsvorgaben. Analysiere Audio lokal, sodass gleichzeitige Besucher keine serverseitige Audioverarbeitung benötigen. Stelle optimierte statische Assets über CDN-kompatibles Hosting bereit.

Strebe flüssige Desktop-Leistung und brauchbare Leistung auf Mittelklasse-Smartphones an. Miss auf den getesteten Geräten die tatsächliche Bildrate, Speichernutzung und das Ladeverhalten. Pausiere unnötiges Rendering, wenn die Seite ausgeblendet ist, und gib Audio- und GPU-Ressourcen ordnungsgemäß frei.

Unterstütze Touch, Tastaturnavigation, sichtbare Fokuszustände, für Screenreader zugängliche Steuerelemente und reduzierte Bewegung. Stelle einen schlanken 2D-Fallback bereit, wenn WebGL nicht verfügbar ist. Stelle sicher, dass wesentliche Informationen nicht allein über Farbe oder Audio verständlich sind.

### LIEFERUMFANG

Stelle die fertige Website unter einer funktionierenden öffentlichen **HTTPS URL** bereit.

Erstelle ein herunterladbares **30–45-sekündiges H.264 MP4 in 1920 × 1080** mit synchronisiertem lizenziertem Audio, das aus der tatsächlichen Anwendung gerendert wurde. Zeige, wie ein reiner Ton zu einer Wellenform wird, ein obertonreicherer Klang die Skulptur verändert und eine Folge von Resonanzmustern. Verwende deterministische Wiedergabe und stabile Frame-Aufnahme für saubere Ergebnisse.

Liefere das Quellprojekt, lokale Assets, das Lizenzverzeichnis, dokumentierte wissenschaftliche Modelle und Visualisierungszuordnungen, Bereitstellungsanweisungen sowie einen kompakten Prüfbericht. Teste das bereitgestellte Erlebnis in Desktop- und Mobil-Layouts, die Abläufe für Mikrofonberechtigungen, Audiowiedergabe, Uploads, Moduswechsel, Barrierefreiheit und Videowiedergabe. Gib getestete Umgebungen und verbleibende Einschränkungen präzise an.

**NICHT EINSCHLIESSEN:** dekorative Effekte, die als physikalische Simulationen präsentiert werden, Mikrofonberechtigungsanfragen beim Laden der Seite, Audio-Uploads an einen Server, automatisch startenden Ton, Lautsprecherrückkopplungen, überladene Steuerelemente, schnelles Flackern, unleserliche Beschriftungen, Platzhalterfunktionen, fehlerhafte Mobil-Layouts, Wasserzeichen oder unbelegte Behauptungen zur Produktionsreife.