Guitar Tuner: afinador web con Web Components, Polymer y ES6

Fuentes: Guitar Tuner: a web app for tuning guitars with Web Components and Polymer

Guitar Tuner es una aplicación web de código abierto publicada en el repositorio GoogleChrome/guitar-tuner que permite afinar una guitarra estándar de seis cuerdas usando el micrófono del dispositivo. La app está construida como un Single Page App (SPA) y combina varias tecnologías web modernas: Web Components (tres elementos personalizados — , y — que se comunican entre sí mediante eventos), un Service Worker para uso sin conexión, un Web Manifest que facilita añadirla a la pantalla de inicio y características de ES6 como clases, funciones flecha y Promises, integradas con Polymer.

El afinador utiliza la API getUserMedia para acceder al micrófono y la Page Visibility API para desactivar la escucha cuando la pestaña está en segundo plano. El componente analiza la frecuencia dominante del audio y emite eventos con el valor, la octava y la nota más cercana; dibuja un dial en un canvas, y indica si hay que subir o bajar el tono. La afinación es menos precisa que la de un afinador cromático de pinza, pero resulta útil en un apuro.

El autor aplicó la estrategia de carga progresiva y diferida de Polymer para evitar penalizar el rendimiento: cada componente se descarga de forma independiente y se actualiza al llegar, eliminando el estilo placeholder al hacerlo. En WebPageTest, el Speed Index ronda los 450 en conexión por cable y los 2800 en 3G, con un peso total de 40,1 KB (sin contar los polyfills de Web Components, 12 KB adicionales). La app no es compatible con Mobile Safari ni con Internet Explorer por la falta de soporte de getUserMedia; Edge sí lo soportará. El proyecto es abierto y admite contribuciones.