Sonidos que hacen feliz al usuario: por qué tu app web debería sonar
Todo empezó con una pregunta que nadie nos hizo: ¿por qué las apps web son silenciosas?
Estábamos trabajando en la bandeja de MailMask — el panel donde nuestros usuarios ven los emails que llegan a sus aliases — y queríamos que supieran cuando llegaba algo nuevo sin tener que estar mirando la pantalla. Un toast visual está bien, pero si estás en otra pestaña, no lo ves. Necesitábamos sonido.
Y ahí fue donde se puso divertido.
La libertad de construir sin pedir permiso
Hay algo que pasa cuando construyes tu propio producto: no hay un Jira ticket que diga "agregar sonido de notificación". No hay un PM que apruebe la prioridad. Hay una idea, un editor de texto, y la curiosidad de ver qué sale.
Nos sentamos a explorar Web Audio API — la misma tecnología que usan los sintetizadores de música en el browser — y descubrimos que con 7 líneas de JavaScript puedes crear un beep que suena mejor que cualquier archivo MP3 descargado de internet. Sin dependencias. Sin archivos de audio. Sin latencia.
Un oscilador, una frecuencia, un fade. Eso es todo.
De un beep a una personalidad
El primer sonido fue práctico: una notificación cuando llega un email nuevo. Pero una vez que oímos ese pequeño "ding" por primera vez, la conversación cambió de "necesitamos esto" a "¿dónde más podemos poner sonido?".
Así nacieron cuatro sonidos distintos en MailMask:
Ninguno dura más de 200 milisegundos. Son tan cortos que los sientes más de lo que los escuchas. Están ahí para confirmar que la acción ocurrió, no para distraerte.
El truco técnico: un AudioContext, no cien
El error más común al implementar sonido en web es crear un AudioContext nuevo cada vez. Los browsers modernos lo bloquean si no hubo interacción previa del usuario. La solución es crear uno solo, activarlo en el primer click, y reutilizarlo:
let audioCtx = null;
document.addEventListener("click", () => {
if (!audioCtx)
audioCtx = new AudioContext();
if (audioCtx.state === "suspended")
audioCtx.resume();
});
// Después, en cualquier momento:
const osc = audioCtx.createOscillator();
osc.frequency.value = 800;
osc.start();Cero dependencias. Funciona en todos los browsers modernos. El sonido se sintetiza en tiempo real — no hay archivos que cargar, no hay requests extra, no hay nada que cachear.
Por qué importa (más de lo que crees)
Los sonidos no son decoración. Son feedback. Cada vez que un usuario hace click y escucha que la acción se completó, su cerebro registra certeza. No tiene que buscar visualmente la confirmación. No se pregunta "¿funcionó?". Lo sabe.
En una app de email, donde esperar respuestas genera ansiedad, ese feedback instantáneo cambia la experiencia. Un "whoosh" al enviar es más tranquilizador que cualquier mensaje de "Enviado correctamente".
Construir con curiosidad, no con obligación
Nada de esto estaba en el roadmap. No era un feature request. Fue curiosidad pura: "¿se puede hacer sonido sin archivos de audio?" → "sí" → "¿cómo suena?" → "qué cool" → "¿dónde más lo ponemos?".
Ese es el tipo de decisiones que tomamos construyendo MailMask. No preguntamos "¿cuál es el ROI de un sonidito?". Preguntamos "¿esto hace más satisfactorio usar el producto?". Si la respuesta es sí, lo hacemos.
Porque al final, las herramientas que más disfrutas usar son las que alguien disfrutó construir. Y nosotros disfrutamos mucho esto.
Pruébalo tú mismo
Si quieres experimentar la diferencia que hacen estas micro-interacciones, crea una cuenta en MailMask. Agrega un dominio, crea un alias, envía un email de prueba. Vas a escuchar cada paso.
Y si eres developer y quieres implementar esto en tu propia app, ya tienes el código arriba. Son menos de 20 líneas. No hay excusa para que tu app sea silenciosa.