Zhuzhiliao: Recreando el sonido de un juguete tradicional con Web Audio en un solo archivo sin dependencias

¿Recuerdas el zhuzhiliao de los puestos callejeros que costaba unos pocos yuanes? Al girarlo emitía un sonido "wa-wa" que era molesto y fascinante a la vez. Hoy en día es cada vez más difícil encontrar uno físico, pero un desarrollador lo ha llevado al navegador con tecnología puramente frontend: Zhuzhiliao es una simulación web de un solo archivo sin dependencias, con muestras de audio reales, optimizada para móviles, lista para jugar.

¿Por qué vale la pena?

Lo más atractivo de este proyecto es su minimalismo y profundidad a la vez:

Un solo archivo sin dependencias: Toda la aplicación es un index.html que incluye renderizado en Canvas, procesamiento de audio con Web Audio, muestras de audio grabadas, e incluso el manifest y el service worker de PWA. Sin compilación, sin conexión, doble clic y a jugar.
Simulación física real: El tubo de bambú se modela como una partícula atada a una cuerda, con gravedad, cuerda elástica y resistencia del aire, integradas con paso fijo de 1/240 segundos. La variable clave para el sonido es la velocidad angular de la dirección de la cuerda: cuanto más rápido giras, más tensa la cuerda, más fuerte y brillante el sonido.
Muestras de audio reales: La fuente principal de sonido es una grabación de 1.72 segundos extraída de un video real (exactamente 4 ciclos de "wa"), procesada con alineación de envolvente y bucle sin fisuras, incrustada en el HTML en formato AAC. La velocidad de reproducción varía con la velocidad de giro: cuanto más rápido giras, más rápido y agudo el sonido.

Cómo jugar e interactuar

Al abrir la página, puedes:

Girar manualmente: Mantén presionada la pantalla y dibuja círculos, como si giraras el juguete real. En pantalla táctil, el punto de anclaje se eleva automáticamente por encima de la punta del dedo para evitar que la mano tape la cigarra.
Giro automático: Haz clic en el botón o presiona la barra espaciadora para que el juguete gire solo.
Girar el teléfono (móvil, requiere HTTPS o archivo local): Sostén el teléfono y dibuja círculos; la dirección de la gravedad en coordenadas del dispositivo impulsa directamente el giro. En iOS, la primera vez se requiere autorización para el sensor de movimiento.

Aspectos técnicos destacados

Cadena de síntesis de sonido

Si la decodificación de la muestra falla, el proyecto incluye un plan de respaldo de síntesis pura que imita el principio de sonido del juguete real:

Juguete real	Implementación sintetizada
Fricción pegajosa de la resina produce pulsos	Oscilador de diente de sierra, frecuencia aumenta con la velocidad (55~195 Hz), saturación suave con tanh para añadir armónicos ásperos
Granularidad del canto de la cigarra	Modulación de amplitud sinusoidal de baja frecuencia (24~45 Hz) + ruido de fricción con filtro de paso de banda
Resonancia de la membrana de bambú y la cavidad	Tres picos de resonancia en paralelo con filtros de paso de banda (1050 / 2150 / 3350 Hz)
El "wa-wa" del giro	Frecuencia central del filtro de paso de banda barre con la fase de rotación

Simulación física

El tubo de bambú es una partícula atada a una cuerda, con fuerzas de gravedad, cuerda elástica que solo tira (no empuja) y resistencia del aire. La condición para emitir sonido es que la velocidad angular de la dirección de la cuerda supere aproximadamente 1.1 vueltas/segundo y la cuerda esté tensa; de lo contrario, no suena. Al soltar, el sonido se desvanece gradualmente por inercia.

Optimizado para móviles

Adaptación a áreas seguras, longitud de la cuerda escala con la pantalla.
Al tocar, el punto de anclaje se eleva automáticamente para evitar que el dedo tape.
Exclusión mutua de múltiples toques para evitar operaciones accidentales.
El audio se inicializa en el primer toque/clic y se desbloquea al levantar el dedo (cumpliendo con las reglas de activación de usuario).
Se manejan el estado interrupted de iOS y el roundRect de núcleos antiguos.

Optimización de rendimiento

Las escenas estáticas se precomponen en una capa fuera de pantalla; después de 8 segundos de inactividad, el hilo de audio se suspende automáticamente para ahorrar batería.

Contador y privacidad

En la parte inferior de la página se muestra tu propio "contador de wa": cada vuelta que giras manualmente cuenta un "wa"; el giro automático no cuenta. Los datos se almacenan en el localStorage del navegador, no se suben, no hay conexión, no hay backend: después de cargar la página, no se realizan más solicitudes.

Anteriormente había un contador en tiempo real de todo el sitio con Cloudflare Worker + Durable Object, pero se ha retirado por completo y el código del backend se ha eliminado del repositorio.

Licencia y declaración

Nota: Este proyecto no es de código abierto. El código fuente se publica solo para fines de aprendizaje e intercambio, pero no se autoriza a nadie a redistribuirlo ni a desplegarlo públicamente. El sitio oficial es únicamente https://zhuzhiliao.icu; cualquier despliegue en otros dominios no está autorizado.

Permitido: leer e investigar el código fuente, ejecutarlo localmente en dispositivos que poseas o controles, modificarlo para aprendizaje o uso personal.

No autorizado: redistribución (incluidas versiones modificadas), despliegue en ubicaciones accesibles a terceros, ofrecer servicios al público, uso comercial, eliminar avisos de derechos de autor.

Cómo ejecutar localmente

# Simplemente abre index.html, no se necesita compilación
# O inicia un servidor estático y accede desde el móvil en la misma Wi-Fi
python3 -m http.server 8123

Resumen

Zhuzhiliao es un caso de combinación ingeniosa de un juguete tradicional con tecnología web moderna. Muestra cómo implementar una simulación física compleja y procesamiento de audio en un solo archivo, manteniendo una portabilidad extrema. Ya sea que te interese Web Audio o quieras revivir recuerdos de la infancia, vale la pena abrir https://zhuzhiliao.icu y girar un par de veces.

Si te trae recuerdos o te parece interesante la idea de meter "muestras de audio reales + física de partículas con cuerda" en un solo archivo, no dudes en darle una estrella en GitHub.

Fuente

imsai-sh/zhuzhiliao: Zhuzhiliao — un juguete tradicional que suena al girar, versión simulada en web. Un solo archivo sin dependencias, muestras de audio reales, optimizado para móviles.