curiositech/windags-skills

Diseño de Sonido en Aplicaciones

Toma las decisiones de diseño sobre cuándo, qué y cómo deben aparecer los sonidos en las aplicaciones. Esto no trata sobre ingeniería de audio (eso es sound-engineer) ni sobre efectos de sonido retro (eso es win31-audio-design). Este skill responde la pregunta más difícil del sonido en UI: ¿Esta interacción debería hacer ruido? Y si es así, ¿de qué tipo?

Cuándo Usarlo

Úsalo para:

• Decidir qué interacciones en una aplicación web o móvil deben tener retroalimentación sonora
• Seleccionar características de sonido apropiadas para notificaciones, confirmaciones, errores
• Crear sonidos UI generados por IA con ElevenLabs, AudioCraft o Stable Audio
• Implementar sonidos procedurales con Web Audio API
• Emparejar retroalimentación háptica con audio en iOS/Android
• Establecer una identidad de marca sónica para un producto
• Auditar el diseño de sonido existente de una aplicación en busca de molestia vs. utilidad

NO lo uses para:

• Mezcla/masterización de audio profesional -> usa sound-engineer
• Sonidos del sistema con temática de Windows 3.1 -> usa win31-audio-design
• Composición musical o banda sonora -> usa sound-engineer
• Audio de lectores de pantalla de accesibilidad -> usa accessibility-expert
• Sistemas de audio para juegos (3D posicional, música dinámica) -> usa sound-engineer

La Pregunta Fundamental: ¿Debería Hacer un Sonido?

¿La interacción necesita RETROALIMENTACIÓN?
|
+-- ¿Acción iniciada por el usuario (tocar, hacer clic, enviar)?
|   +-- ¿El resultado es visible en pantalla?
|   |   +-- SÍ y es obvio --> El sonido es OPCIONAL (a menudo se omite)
|   |   +-- SÍ pero es sutil --> El sonido AYUDA (confirmación suave)
|   |   +-- NO (proceso en segundo plano) --> El sonido es RECOMENDADO
|   +-- ¿La acción es destructiva?
|       +-- SÍ --> El sonido es RECOMENDADO (tono de advertencia distintivo)
|       +-- NO --> El sonido es OPCIONAL
|
+-- ¿Evento iniciado por el sistema (notificación, alerta)?
|   +-- ¿El usuario está en la aplicación?
|   |   +-- SÍ --> Sonido sutil dentro de la aplicación
|   |   +-- NO --> Sonido de notificación (sigue las convenciones del SO)
|   +-- ¿Es urgente en el tiempo?
|       +-- SÍ --> Sonido más urgente/llamativo
|       +-- NO --> Puede ser silencioso o ambiental
|
+-- ¿Ambiental/atmosférico (estado de fondo)?
    +-- ¿La aplicación se beneficia de la presencia? --> Ambiental sutil
    +-- ¿El usuario está trabajando/concentrado? --> SILENCIO

---

El Vocabulario de Sonidos UI

Toda aplicación necesita sonidos de estas categorías. No todas las categorías son obligatorias: la mayoría de las aplicaciones necesitan de 3 a 5.

Nivel 1: Esencial (La mayoría de las aplicaciones los necesitan)

Tipo de Sonido	Propósito	Carácter	Duración	Ejemplo
Confirmar	Acción exitosa	Tono brillante y ascendente	100-300ms	Mensaje enviado en Slack
Error	Acción fallida	Grave, plano o descendente	200-400ms	Validación de formulario fallida
Notificación	Llegó nueva información	Distintivo, energía media	300-600ms	Mensaje entrante en Slack

Nivel 2: Pulido (Aplicaciones que se preocupan)

Tipo de Sonido	Propósito	Carácter	Duración	Ejemplo
Transición	Navegación entre vistas	Sutil swoosh o toque	50-150ms	Paso de página en iOS
Alternar	Cambio de estado binario	Clic o chasquido nítido	50-100ms	Encendido/apagado
Hover	Retroalimentación al pasar el ratón	Tic apenas audible	20-50ms	Hover en elemento de menú
Selección	Elemento elegido de una lista	Pop o pulsación suave	50-150ms	Selección de menú desplegable
Eliminar	Eliminación destructiva	Golpe hueco o swoosh	150-300ms	Acción de papelera

Nivel 3: Deleite (Aplicaciones con personalidad)

Tipo de Sonido	Propósito	Carácter	Duración	Ejemplo
Logro	Hito alcanzado	Musical, celebrador	500ms-2s	Lección completada en Duolingo
Ambiental	Presencia de fondo	En bucle, atmosférico	Continuo	Noisli, Forest app
Sello de Marca	Apertura/cierre de la aplicación	Icónico, memorable	500ms-1.5s	Ta-dum de Netflix
Huevo de Pascua	Deleite oculto	Juguetón, inesperado	Variable	Recompensa del código Konami

---

Convenciones de Plataforma

Apple (iOS / macOS)

Las HIG de Apple exigen comportamientos de audio específicos:

• Los sonidos del sistema son sagrados: Nunca anules o reemplaces los sonidos de alerta del sistema
• Respeta el interruptor de silencio: Si el interruptor físico de silencio está activado, los sonidos de tu aplicación se DETIENEN (excepto la reproducción de medios)
• Las categorías de sesión de audio importan:
  • ambient — se mezcla con otro audio, respeta el interruptor de silencio
  • soloAmbient — silencia otro audio, respeta el interruptor de silencio
  • playback — ignora el interruptor de silencio (solo para aplicaciones multimedia)
• Los hápticos se emparejan con los sonidos: Usa UIImpactFeedbackGenerator junto con el audio

Características de sonido de Apple:

• Ondas sinusoidales limpias y tonos filtrados
• Armónicos mínimos (puro, no zumbante)
• Decaimiento corto (los sonidos no se prolongan)
• Volumen consistente en relación con los sonidos del sistema

// iOS: Reproducir un sonido del sistema
import AudioToolbox
AudioServicesPlaySystemSound(1057) // Clic de teclado estándar

// iOS: Háptico + sonido personalizado
let generator = UIImpactFeedbackGenerator(style: .light)
generator.impactOccurred()
// Reproduce tu sonido personalizado simultáneamente

Material Design (Android)

Principios de diseño de sonido de Google:

• Funcional primero: El sonido debe informar, no decorar
• Sutil por defecto: Los sonidos de la UI deben ser más silenciosos que los medios
• Primero háptico en Android: Prefiere la retroalimentación háptica; agrega sonido solo cuando los hápticos sean insuficientes
• Sonido ACTIVADO solo cuando sea significativo: El estado predeterminado debe ser silencioso para la mayoría de las interacciones

Características de sonido de Material:

• Sonidos cortos, nítidos y percusivos
• Contenido armónico sutil (no ondas sinusoidales puras)
• Ligeramente más cálido que Apple (más frecuencia media)
• Diseñados para funcionar en altavoces de teléfono de baja calidad

Aplicaciones Web

La web tiene las convenciones de sonido más DÉBILES, lo que significa más libertad pero también más riesgo de molestia.

• Nunca reproduzcas sonidos automáticamente — los navegadores lo bloquean y los usuarios lo odian
• Requiere un gesto del usuario primero: La Web Audio API requiere una interacción del usuario antes de reproducir
• Proporciona control de volumen: Siempre permite a los usuarios silenciar o ajustar
• Considera a los usuarios de auriculares: Lo que suena bien en los altavoces de un portátil puede ser discordante en auriculares

---

Creando Sonidos con IA

Efectos de Sonido de ElevenLabs

Mejor para: Sonidos UI realistas y de alta calidad con descripciones de carácter específicas.

# Generar un timbre de confirmación
curl -X POST "https://api.elevenlabs.io/v1/sound-generation" \
  -H "xi-api-key: TU_CLAVE" \
  -H "Content-Type: application/json" \
  -d '{
    "text": "Timbre ascendente corto y brillante, digital, onda sinusoidal limpia, 200ms, sonido de confirmación UI",
    "duration_seconds": 0.5
  }'

Prompts efectivos para ElevenLabs:

• Confirmar: "Timbre ascendente corto de dos notas, digital limpio, cálido, 200ms"
• Error: "Golpe hueco grave con ligero zumbido, digital, 300ms, no duro"
• Notificación: "Melodía suave de tres notas de xilófono, amigable, 400ms"
• Alternar: "Clic mecánico nítido, interruptor de plástico, 50ms"
• Eliminar: "Swoosh hueco suave descendente, 200ms"
• Logro: "Arpegio ascendente brillante, chispeante, celebrador, 1 segundo"

Meta AudioCraft (Código Abierto)

Mejor para: Desarrolladores que quieren control total y sin costos de API.

from audiocraft.models import AudioGen
from audiocraft.data.audio import audio_write

model = AudioGen.get_pretrained('facebook/audiogen-medium')
model.set_generation_params(duration=0.5)

# Generar sonidos UI
descriptions = [
    "pitido de confirmación digital corto, tono ascendente, limpio",
    "zumbido de error bajo, breve, no duro, digital",
    "timbre de notificación suave, dos notas, agradable",
]

wav = model.generate(descriptions)
for i, w in enumerate(wav):
    audio_write(f'ui_sound_{i}', w.cpu(), model.sample_rate)

Stable Audio Open

Mejor para: Sonidos ambientales más largos, texturas de fondo, sellos de marca.

import torch
from stable_audio_tools import get_pretrained_model
from stable_audio_tools.inference.generation import generate_diffusion_cond

model, model_config = get_pretrained_model("stabilityai/stable-audio-open-1.0")

# Generar fondo ambiental
conditioning = [{
    "prompt": "textura digital ambiental tranquila, zumbido bajo cálido, adecuado para fondo de aplicación de productividad, repetible",
    "seconds_total": 10
}]

Lista de Verificación de Post-Procesamiento

Los sonidos generados por IA necesitan limpieza antes de enviarse:

1. Recortar silencio — elimina el espacio muerto inicial/final
2. Normalizar volumen — todos los sonidos UI deben tener una sonoridad percibida consistente
3. Fundir entrada/salida — un fundido de 5-10 ms evita artefactos de clic
4. Comprimir rango dinámico — los sonidos UI deben tener un volumen consistente
5. Exportar como WAV (para nativo) o OGG/MP3 (para web, menos de 50KB por sonido)
6. Probar en los altavoces objetivo — los altavoces del teléfono cortan frecuencias por debajo de 200Hz

---

Web Audio API: Sonidos Procedurales

Para aplicaciones web, generar sonidos proceduralmente elimina la necesidad de archivos de audio por completo. Paquetes más pequeños, disponibilidad instantánea.

class UISound {
  private ctx: AudioContext | null = null;

  private getContext(): AudioContext {
    if (!this.ctx) {
      this.ctx = new AudioContext();
    }
    return this.ctx;
  }

  /** Confirmación ascendente brillante */
  confirm(): void {
    const ctx = this.getContext();
    const osc = ctx.createOscillator();
    const gain = ctx.createGain();

    osc.connect(gain);
    gain.connect(ctx.destination);

    osc.type = 'sine';
    osc.frequency.setValueAtTime(600, ctx.currentTime);
    osc.frequency.linearRampToValueAtTime(900, ctx.currentTime + 0.15);

    gain.gain.setValueAtTime(0.15, ctx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.2);

    osc.start(ctx.currentTime);
    osc.stop(ctx.currentTime + 0.2);
  }

  /** Tono de error descendente grave */
  error(): void {
    const ctx = this.getContext();
    const osc = ctx.createOscillator();
    const gain = ctx.createGain();

    osc.connect(gain);
    gain.connect(ctx.destination);

    osc.type = 'triangle';
    osc.frequency.setValueAtTime(400, ctx.currentTime);
    osc.frequency.linearRampToValueAtTime(200, ctx.currentTime + 0.3);

    gain.gain.setValueAtTime(0.12, ctx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.35);

    osc.start(ctx.currentTime);
    osc.stop(ctx.currentTime + 0.35);
  }

  /** Clic sutil para alternar y selecciones */
  click(): void {
    const ctx = this.getContext();
    const osc = ctx.createOscillator();
    const gain = ctx.createGain();

    osc.connect(gain);
    gain.connect(ctx.destination);

    osc.type = 'square';
    osc.frequency.setValueAtTime(800, ctx.currentTime);

    gain.gain.setValueAtTime(0.08, ctx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.05);

    osc.start(ctx.currentTime);
    osc.stop(ctx.currentTime + 0.05);
  }

  /** Melodía de notificación de tres notas */
  notify(): void {
    const ctx = this.getContext();
    const notes = [523, 659, 784]; // C5, E5, G5

    notes.forEach((freq, i) => {
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.connect(gain);
      gain.connect(ctx.destination);

      osc.type = 'sine';
      osc.frequency.setValueAtTime(freq, ctx.currentTime);

      const start = ctx.currentTime + i * 0.12;
      gain.gain.setValueAtTime(0, start);
      gain.gain.linearRampToValueAtTime(0.12, start + 0.02);
      gain.gain.exponentialRampToValueAtTime(0.001, start + 0.15);

      osc.start(start);
      osc.stop(start + 0.15);
    });
  }
}

// Uso
const sound = new UISound();
document.querySelector('#submit')?.addEventListener('click', () => sound.confirm());

---

Emparejamiento Háptico-Audio (Móvil)

En dispositivos móviles, los hápticos y el audio deben diseñarse como una UNIDAD. El háptico llega primero (retroalimentación física inmediata), el sonido llega segundo (confirmación y carácter).

Guía de Emparejamiento

Interacción	Háptico	Sonido	Sincronización
Tocar botón	Impacto ligero	Clic corto	Simultáneo
Interruptor	Impacto medio	Chasquido nítido	Háptico 10ms antes del sonido
Pull-to-refresh	Tic de selección durante el arrastre; notificación al completar	Sonido de estiramiento sutil; timbre de confirmación	Háptico lidera por 20ms
Deslizar para eliminar	Impacto fuerte en el umbral	Swoosh hueco	Háptico en el punto de compromiso
Pulsación larga	Continuo rígido	Zumbido creciente grave	Háptico comienza con el sonido
Éxito	Patrón de éxito (triple toque)	Arpegio ascendente	Alineado al ritmo

Implementación en iOS

import UIKit
import AVFoundation

class FeedbackManager {
    static let shared = FeedbackManager()

    private let lightImpact = UIImpactFeedbackGenerator(style: .light)
    private let mediumImpact = UIImpactFeedbackGenerator(style: .medium)
    private let heavyImpact = UIImpactFeedbackGenerator(style: .heavy)
    private let notificationFeedback = UINotificationFeedbackGenerator()

    func tapConfirm() {
        lightImpact.impactOccurred()
        SoundPlayer.play(.confirm)
    }

    func errorShake() {
        notificationFeedback.notificationOccurred(.error)
        SoundPlayer.play(.error)
    }

    func deleteCommit() {
        heavyImpact.impactOccurred()
        SoundPlayer.play(.delete)
    }
}

---

La Psicología de los Sonidos Satisfactorios

Por qué algunos sonidos UI se sienten "correctos" y otros "baratos":

Propiedades de un Sonido Satisfactorio

Propiedad	Por qué funciona	Ejemplo
El tono sube	Señala progreso, optimismo, finalización	Los timbres de confirmación SUBEN
Decaimiento corto	Se siente receptivo y controlado	Sonidos del menú de Nintendo
Riqueza armónica	Se siente orgánico y cálido	Sonido de "toque" de Slack
Volumen consistente	Se siente profesional y predecible	Sonidos del sistema de Apple
Alineación rítmica	Se siente intencional y diseñado	Contador de racha de Duolingo

Propiedades de un Sonido Molesto

Propiedad	Por qué molesta	Evita
Repetitivo sin variación	Los humanos se habitúan y luego se irritan	El mismo sonido exacto 100 veces al día
Demasiado alto en relación al contexto	Rompe la concentración del usuario	Niveles de volumen que no respetan el entorno