Cigale en bambou : un fichier unique sans dépendance, recréant le son wa-wa du jouet traditionnel avec Web Audio

Vous souvenez-vous des cigales en bambou vendues quelques yuans sur les étals de rue quand vous étiez enfant ? Un tour et elles émettaient un son « wa—wa— », agaçant mais fascinant. Aujourd'hui, il est de plus en plus difficile d'en trouver, mais un développeur les a transplantées dans le navigateur avec des technologies purement front-end — Cigale en bambou (zhuzhiliao) est une simulation Web en fichier unique sans dépendance, avec échantillons audio réels, optimisée pour mobile, prête à jouer dès l'ouverture.

Pourquoi c'est intéressant ?

Ce qui attire le plus dans ce projet, c'est son minimalisme et sa profondeur :

Fichier unique sans dépendance : toute l'application est un index.html, intégrant le rendu Canvas, le traitement audio Web Audio, les échantillons enregistrés, et même le manifest PWA et le service worker. Aucune construction, aucune connexion requise, double-cliquez et jouez.
Simulation physique réaliste : le tube de bambou est modélisé comme une masse ponctuelle attachée à une corde, avec gravité, corde élastique, résistance de l'air, intégrés avec un pas de temps fixe de 1/240 seconde. La variable clé pour produire le son est la vitesse angulaire de la direction de la corde — plus vous tournez vite, plus la corde est tendue, plus le son est fort et aigu.
Échantillons audio réels : la source sonore principale est un enregistrement de 1,72 seconde extrait d'une vidéo réelle (exactement 4 cycles de « wa »), traité avec alignement d'enveloppe et boucle sans couture, intégré dans le HTML au format AAC. La vitesse de lecture varie avec la vitesse de rotation : plus vous tournez vite, plus le son est rapide et aigu.

Gameplay et interaction

Après avoir ouvert la page, vous pouvez :

Tourner manuellement : maintenez l'écran et faites des cercles, comme avec un vrai jouet. Sur écran tactile, le point d'ancrage se soulève automatiquement au-dessus du doigt pour éviter que la main ne cache la petite cigale.
Tourner automatiquement : cliquez sur le bouton ou appuyez sur la barre d'espace pour que le jouet tourne tout seul.
Secouer le téléphone (mobile, nécessite HTTPS ou fichier local) : tenez le téléphone et faites des cercles, la direction de la gravité tourne dans les coordonnées du téléphone, entraînant directement la tige. Sur iOS, une autorisation du capteur de mouvement est requise la première fois.

Points techniques

Chaîne de synthèse sonore

Si le décodage de l'échantillon échoue, le projet intègre une solution de secours entièrement synthétique qui imite le principe de production du son du vrai jouet :

Vrai jouet	Implémentation synthétique
Frottement collant de la colophane produisant des impulsions	Oscillateur en dents de scie, fréquence augmentant avec la vitesse (55~195 Hz), écrêtage doux tanh pour ajouter des harmoniques rugueuses
Granularité du chant de cigale	Modulation d'amplitude sinusoïdale basse fréquence 24~45 Hz + bruit de frottement passe-bande
Résonance de la membrane de bambou + cavité	Trois pics de résonance passe-bande en parallèle (1050 / 2150 / 3350 Hz)
Le « wa—wa— » du tournoiement	Fréquence centrale du filtre passe-bande balayant selon la phase de rotation

Simulation physique

Le tube de bambou est une masse ponctuelle attachée à une corde, soumise à la gravité, à une corde élastique qui ne tire que (pas de poussée), et à la résistance de l'air. La condition pour produire le son est que la vitesse angulaire de la direction de la corde dépasse environ 1,1 tour/seconde et que la corde soit tendue ; sinon, pas de son. Après avoir relâché, l'inertie laisse le son s'estomper progressivement.

Optimisé pour mobile

Adaptation des zones de sécurité, longueur de corde ajustée à la taille de l'écran.
Le point d'ancrage se soulève automatiquement en cas de toucher pour éviter que le doigt ne cache l'objet.
Exclusion mutuelle du multi-touch pour éviter les fausses manipulations.
L'audio est initialisé au premier toucher/clic et déverrouillé au relâchement (conforme aux règles d'activation utilisateur).
Gestion de l'état interrupted sur iOS et repli pour l'ancien noyau roundRect.

Optimisation des performances

Les scènes statiques sont pré-composées dans une couche hors écran, et après 8 secondes d'inactivité, le thread audio est automatiquement suspendu pour économiser l'énergie.

Compteur et confidentialité

En bas de page, votre propre compteur de « wa » est affiché : chaque tour manuel compte un « wa », les tours automatiques ne comptent pas. Les données sont stockées dans le localStorage du navigateur, non téléversées, non connectées, sans backend — une fois la page chargée, aucune requête n'est envoyée.

Il y avait auparavant un compteur temps réel à l'échelle du site avec Cloudflare Worker + Durable Object, mais il a été entièrement retiré, et le code backend a été supprimé du dépôt.

Licence et déclaration

Attention : ce projet n'est pas open source. Le code source est publié uniquement pour l'apprentissage et l'échange, mais personne n'est autorisé à le redistribuer ou à le déployer publiquement. Le site officiel est uniquement https://zhuzhiliao.icu ; tout déploiement sur d'autres domaines n'est pas autorisé.

Autorisé : lire et étudier le code source, l'exécuter localement sur vos propres appareils, le modifier pour l'apprentissage ou un usage personnel.

Non autorisé : redistribution (y compris les versions modifiées), déploiement vers des emplacements accessibles à des tiers, fourniture de services, utilisation commerciale, suppression des mentions de droits d'auteur.

Comment exécuter localement

# Ouvrez simplement index.html, aucune construction requise
# Ou démarrez un serveur statique et accédez-y depuis votre téléphone sur le même Wi-Fi
python3 -m http.server 8123

Résumé

Cigale en bambou est un exemple d'intégration astucieuse d'un jouet traditionnel avec les technologies Web modernes. Il montre comment implémenter une simulation physique complexe et un traitement audio dans un fichier unique tout en conservant une portabilité extrême. Que vous soyez intéressé par Web Audio ou que vous souhaitiez revivre des souvenirs d'enfance, cela vaut la peine d'ouvrir https://zhuzhiliao.icu et de faire quelques tours.

Si cela évoque des souvenirs, ou si vous trouvez intéressant de caser « échantillons audio réels + physique de masse ponctuelle attachée à une corde » dans un fichier unique, n'hésitez pas à mettre une étoile sur GitHub.

Source

imsai-sh/zhuzhiliao: Cigale en bambou — jouet traditionnel qui fait wa-wa en tournant, version simulation Web. Fichier unique sans dépendance, échantillons audio réels, optimisé pour mobile.