Voir le son

## Le son rendu visible — Prompt de production

Créez **« Le son rendu visible »**, une expérience scientifique interactive soignée, destinée au grand public et conçue avec **Three.js**. Transformez le son en magnifiques formes 3D réactives, que chacun peut explorer sans connaissances musicales ou scientifiques. Livrez un **site web déployé** et une **vidéo de démonstration MP4 cinématographique**.

L’expérience doit évoquer un musée des sciences interactif haut de gamme : saisissante visuellement, immédiatement compréhensible, ludique et scientifiquement rigoureuse. Concevez-la pour un large public, sur ordinateur comme sur mobile.

### PREMIÈRE EXPÉRIENCE

Ouvrez sur une sculpture sonore lumineuse, animée d’un lent mouvement, sur un fond bleu nuit profond. Utilisez une typographie ivoire chaude, avec des accents cyan électrique, violets et corail discrets. Gardez une composition élégante et une interface minimaliste.

Affichez le titre **« Découvrez ce que le son peut faire. »** Proposez trois points d’entrée clairs :

- **Lire un son** — lance immédiatement un exemple audio sélectionné et sa visualisation.
- **Utiliser mon microphone** — visualise la voix de l’utilisateur ou les sons environnants.
- **Importer un fichier audio** — explore un fichier audio local.

Permettez aux visiteurs de découvrir quelque chose de captivant en un clic. Proposez des exemples intégrés afin que l’accès au microphone et l’importation de fichiers restent facultatifs. Avant la lecture, lancez un aperçu silencieux clairement identifié.

### TROIS FAÇONS D’EXPLORER

**1. Sculpture sonore — visualisation audio artistique**

Créez un champ sculptural de particules et de rubans fluides qui réagit avec souplesse à l’analyse audio en direct. Associez les basses fréquences à de larges mouvements, les fréquences moyennes aux détails structurels et les hautes fréquences à de fins accents scintillants. Laissez le volume sonore agir sur l’échelle et l’énergie, sans variations brusques.

Donnez à la parole, aux applaudissements, au fredonnement et à la musique des réactions visiblement distinctes. Indiquez que ce mode est une interprétation artistique du son.

**2. Explorateur d’ondes — comprendre le signal**

Affichez une forme d’onde animée à côté d’un spectre de fréquences, avec une présentation spatiale facultative. Expliquez simplement : la forme d’onde montre l’évolution du signal dans le temps ; le spectre montre son contenu fréquentiel.

Incluez un générateur de tonalités interactif avec des commandes de fréquence et de volume clairement libellées. Permettez aux utilisateurs de comparer un son pur à un son plus riche et d’en voir la différence. Utilisez un volume initial doux, des transitions audio fluides et une commande d’arrêt évidente. Expliquez que l’amplitude visuelle représente le niveau du signal d’entrée, et non un niveau sonore physique étalonné.

**3. Figures de résonance — explorer les vibrations**

Montrez une plaque virtuelle vibrante, avec des particules semblables à du sable qui forment des figures nodales. Proposez plusieurs modes de vibration soigneusement implémentés, que les utilisateurs peuvent explorer en modifiant la fréquence d’excitation.

Basez les figures sur un modèle de plaque documenté, avec une géométrie et des conditions aux limites définies. Expliquez que les particules s’accumulent près des zones de vibration minimale. Indiquez qu’il s’agit d’une simulation pédagogique et décrivez ses simplifications. Distinguez visuellement les effets décoratifs du modèle scientifique.

### FACILITER LA DÉCOUVERTE

Proposez de courtes incitations contextuelles comme **« Essayez de fredonner une note tenue », « Claquez une fois dans vos mains »** et **« Comparez un son grave à un son aigu ».** Associez chacune à une réaction immédiatement visible.

Gardez les commandes avancées repliées. Prévoyez des commandes de pause, de réinitialisation, de plein écran, de sensibilité et d’intensité du mouvement. Conservez des états clairs pour la source audio et la lecture lors du changement de mode. Proposez une brève explication accessible pour chaque mode, sans masquer la scène.

### AUDIO ET CONFIDENTIALITÉ

Utilisez la **Web Audio API** pour la lecture et l’analyse, avec un lissage stable et une normalisation raisonnable. Ne demandez l’accès au microphone qu’après sa sélection par l’utilisateur. Traitez localement l’entrée du microphone et les fichiers importés ; n’importez, ne stockez ni ne transmettez aucun audio. Revisitez les trois modes avec un thème d’aurore : ajoutez au fond bleu nuit un dégradé d’aurore verte et violette dérivant lentement, recolorez les particules et les rubans de la sculpture sonore en turquoise et violet, et donnez aux grains des figures de résonance une faible lueur froide. Conservez le texte ivoire, réduisez la luminosité globale pour une ambiance d’observation du ciel nocturne et ne modifiez aucune interaction. Affichez un indicateur de microphone permanent et une commande claire **« Arrêter le microphone »** qui libère le microphone. Désactivez le retour du microphone dans les haut-parleurs afin d’éviter le larsen. Gérez avec élégance les refus d’autorisation, les appareils indisponibles, les fichiers non pris en charge, le silence et les interruptions audio.

Utilisez des fichiers audio intégrés CC0 vérifiés ou bénéficiant de licences appropriées, et incluez un manifeste des licences des ressources.

### QUALITÉ VISUELLE ET TECHNIQUE

Utilisez un rendu de particules soigné, une profondeur convaincante, un bloom maîtrisé, des animations fluides et des mouvements de caméra discrets. Gardez le texte net et les commandes lisibles. Évitez les clignotements agressifs et le bruit visuel excessif.

Créez une application Three.js maintenable, avec une géométrie et des shaders efficaces sur GPU, des tampons réutilisables, une densité de pixels plafonnée, un nombre adaptatif de particules et des préréglages de qualité. Analysez l’audio localement afin que les visiteurs simultanés ne nécessitent aucun traitement audio côté serveur. Servez des ressources statiques optimisées par un hébergement compatible CDN.

Visez des performances fluides sur ordinateur et utilisables sur des téléphones de gamme intermédiaire. Mesurez la fréquence d’images réelle, l’utilisation de la mémoire et le comportement au chargement sur les appareils testés. Suspendez le rendu inutile lorsque la page est masquée et libérez correctement les ressources audio et GPU.

Prenez en charge le tactile, la navigation au clavier, les états de focus visibles, les commandes accessibles aux lecteurs d’écran et la réduction des mouvements. Prévoyez une solution de repli 2D légère lorsque WebGL n’est pas disponible. Veillez à ce que les informations essentielles soient compréhensibles sans recourir uniquement à la couleur ou au son.

### LIVRABLES

Déployez le site web finalisé sur une **URL HTTPS** publique fonctionnelle.

Produisez un **MP4 H.264 de 30 à 45 secondes, en 1920 × 1080**, téléchargeable, avec un audio sous licence synchronisé, rendu depuis l’application réelle. Montrez un son pur devenant une forme d’onde, un son plus riche transformant la sculpture et une séquence de figures de résonance. Utilisez une lecture déterministe et une capture d’images stable pour un résultat net.

Livrez le projet source, les ressources locales, le manifeste des licences, les modèles scientifiques documentés et les correspondances de visualisation, les instructions de déploiement ainsi qu’un rapport de vérification concis. Testez l’expérience déployée sur les mises en page ordinateur et mobile, les parcours d’autorisation du microphone, la lecture audio, les importations, le changement de mode, l’accessibilité et la lecture vidéo. Indiquez avec précision les environnements testés et les limites restantes.

**NE PAS INCLURE :** des effets décoratifs présentés comme des simulations physiques, des demandes d’autorisation du microphone au chargement de la page, des imports audio vers un serveur, du son en lecture automatique, du larsen dans les haut-parleurs, des commandes envahissantes, des clignotements rapides, des libellés illisibles, des fonctionnalités factices, des mises en page mobiles défaillantes, des filigranes ou des affirmations non étayées de préparation à la production.

## Le son rendu visible — Prompt de production

Créez **« Le son rendu visible »**, une expérience scientifique interactive soignée, destinée au grand public et conçue avec **Three.js**. Transformez le son en magnifiques formes 3D réactives, que chacun peut explorer sans connaissances musicales ou scientifiques. Livrez un **site web déployé** et une **vidéo de démonstration MP4 cinématographique**.

L’expérience doit évoquer un musée des sciences interactif haut de gamme : saisissante visuellement, immédiatement compréhensible, ludique et scientifiquement rigoureuse. Concevez-la pour un large public, sur ordinateur comme sur mobile.

### PREMIÈRE EXPÉRIENCE

Ouvrez sur une sculpture sonore lumineuse, animée d’un lent mouvement, sur un fond bleu nuit profond. Utilisez une typographie ivoire chaude, avec des accents cyan électrique, violets et corail discrets. Gardez une composition élégante et une interface minimaliste.

Affichez le titre **« Découvrez ce que le son peut faire. »** Proposez trois points d’entrée clairs :

- **Lire un son** — lance immédiatement un exemple audio sélectionné et sa visualisation.
- **Utiliser mon microphone** — visualise la voix de l’utilisateur ou les sons environnants.
- **Importer un fichier audio** — explore un fichier audio local.

Permettez aux visiteurs de découvrir quelque chose de captivant en un clic. Proposez des exemples intégrés afin que l’accès au microphone et l’importation de fichiers restent facultatifs. Avant la lecture, lancez un aperçu silencieux clairement identifié.

### TROIS FAÇONS D’EXPLORER

**1. Sculpture sonore — visualisation audio artistique**

Créez un champ sculptural de particules et de rubans fluides qui réagit avec souplesse à l’analyse audio en direct. Associez les basses fréquences à de larges mouvements, les fréquences moyennes aux détails structurels et les hautes fréquences à de fins accents scintillants. Laissez le volume sonore agir sur l’échelle et l’énergie, sans variations brusques.

Donnez à la parole, aux applaudissements, au fredonnement et à la musique des réactions visiblement distinctes. Indiquez que ce mode est une interprétation artistique du son.

**2. Explorateur d’ondes — comprendre le signal**

Affichez une forme d’onde animée à côté d’un spectre de fréquences, avec une présentation spatiale facultative. Expliquez simplement : la forme d’onde montre l’évolution du signal dans le temps ; le spectre montre son contenu fréquentiel.

Incluez un générateur de tonalités interactif avec des commandes de fréquence et de volume clairement libellées. Permettez aux utilisateurs de comparer un son pur à un son plus riche et d’en voir la différence. Utilisez un volume initial doux, des transitions audio fluides et une commande d’arrêt évidente. Expliquez que l’amplitude visuelle représente le niveau du signal d’entrée, et non un niveau sonore physique étalonné.

**3. Figures de résonance — explorer les vibrations**

Montrez une plaque virtuelle vibrante, avec des particules semblables à du sable qui forment des figures nodales. Proposez plusieurs modes de vibration soigneusement implémentés, que les utilisateurs peuvent explorer en modifiant la fréquence d’excitation.

Basez les figures sur un modèle de plaque documenté, avec une géométrie et des conditions aux limites définies. Expliquez que les particules s’accumulent près des zones de vibration minimale. Indiquez qu’il s’agit d’une simulation pédagogique et décrivez ses simplifications. Distinguez visuellement les effets décoratifs du modèle scientifique.

### FACILITER LA DÉCOUVERTE

Proposez de courtes incitations contextuelles comme **« Essayez de fredonner une note tenue », « Claquez une fois dans vos mains »** et **« Comparez un son grave à un son aigu ».** Associez chacune à une réaction immédiatement visible.

Gardez les commandes avancées repliées. Prévoyez des commandes de pause, de réinitialisation, de plein écran, de sensibilité et d’intensité du mouvement. Conservez des états clairs pour la source audio et la lecture lors du changement de mode. Proposez une brève explication accessible pour chaque mode, sans masquer la scène.

### AUDIO ET CONFIDENTIALITÉ

Utilisez la **Web Audio API** pour la lecture et l’analyse, avec un lissage stable et une normalisation raisonnable. Ne demandez l’accès au microphone qu’après sa sélection par l’utilisateur. Traitez localement l’entrée du microphone et les fichiers importés ; n’importez, ne stockez ni ne transmettez aucun audio. Transformez l’expérience en outil pédagogique de physique pour le collège : dans les modes forme d’onde et spectre, annotez la longueur d’onde, l’amplitude et la fréquence avec leurs termes chinois et leurs unités ; dans le mode résonance, expliquez les ondes stationnaires et les nœuds avec un court schéma. Ouvrez chaque mode par une introduction de cours d’au plus 60 caractères chinois, puis terminez-le par une question à choix multiple à laquelle il est possible de répondre directement sur la page ; une bonne réponse déverrouille le mode de vibration suivant. Affichez un indicateur de microphone permanent et une commande claire **« Arrêter le microphone »** qui libère le microphone. Désactivez le retour du microphone dans les haut-parleurs afin d’éviter le larsen. Gérez avec élégance les refus d’autorisation, les appareils indisponibles, les fichiers non pris en charge, le silence et les interruptions audio.

Utilisez des fichiers audio intégrés CC0 vérifiés ou bénéficiant de licences appropriées, et incluez un manifeste des licences des ressources.

### QUALITÉ VISUELLE ET TECHNIQUE

Utilisez un rendu de particules soigné, une profondeur convaincante, un bloom maîtrisé, des animations fluides et des mouvements de caméra discrets. Gardez le texte net et les commandes lisibles. Évitez les clignotements agressifs et le bruit visuel excessif.

Créez une application Three.js maintenable, avec une géométrie et des shaders efficaces sur GPU, des tampons réutilisables, une densité de pixels plafonnée, un nombre adaptatif de particules et des préréglages de qualité. Analysez l’audio localement afin que les visiteurs simultanés ne nécessitent aucun traitement audio côté serveur. Servez des ressources statiques optimisées par un hébergement compatible CDN.

Visez des performances fluides sur ordinateur et utilisables sur des téléphones de gamme intermédiaire. Mesurez la fréquence d’images réelle, l’utilisation de la mémoire et le comportement au chargement sur les appareils testés. Suspendez le rendu inutile lorsque la page est masquée et libérez correctement les ressources audio et GPU.

Prenez en charge le tactile, la navigation au clavier, les états de focus visibles, les commandes accessibles aux lecteurs d’écran et la réduction des mouvements. Prévoyez une solution de repli 2D légère lorsque WebGL n’est pas disponible. Veillez à ce que les informations essentielles soient compréhensibles sans recourir uniquement à la couleur ou au son.

### LIVRABLES

Déployez le site web finalisé sur une **URL HTTPS** publique fonctionnelle.

Produisez un **MP4 H.264 de 30 à 45 secondes, en 1920 × 1080**, téléchargeable, avec un audio sous licence synchronisé, rendu depuis l’application réelle. Montrez un son pur devenant une forme d’onde, un son plus riche transformant la sculpture et une séquence de figures de résonance. Utilisez une lecture déterministe et une capture d’images stable pour un résultat net.

Livrez le projet source, les ressources locales, le manifeste des licences, les modèles scientifiques documentés et les correspondances de visualisation, les instructions de déploiement ainsi qu’un rapport de vérification concis. Testez l’expérience déployée sur les mises en page ordinateur et mobile, les parcours d’autorisation du microphone, la lecture audio, les importations, le changement de mode, l’accessibilité et la lecture vidéo. Indiquez avec précision les environnements testés et les limites restantes.

**NE PAS INCLURE :** des effets décoratifs présentés comme des simulations physiques, des demandes d’autorisation du microphone au chargement de la page, des imports audio vers un serveur, du son en lecture automatique, du larsen dans les haut-parleurs, des commandes envahissantes, des clignotements rapides, des libellés illisibles, des fonctionnalités factices, des mises en page mobiles défaillantes, des filigranes ou des affirmations non étayées de préparation à la production.