Acceso a Web Audio API y flujos de audio prácticos
Comprende el acceso a Web Audio API, los límites de los permisos y los flujos de reproducción, análisis, grabación y recuperación.
Quieres la documentación estructurada de Huella digital?
Este artículo forma parte de la biblioteca editorial. Para pasos de configuración, material de referencia y actualizaciones continuas, entra en la sección de docs.
Web Audio API permite crear, enrutar, analizar y renderizar sonido en una página. Se usa en editores musicales, juegos, reuniones, visualizadores, funciones de accesibilidad y reproductores. La API no concede por sí sola un micrófono, un altavoz ni un archivo de grabaciones. El navegador decide esas capacidades por separado y cada una tiene límites de seguridad y de control del usuario.
Un flujo fiable separa cuatro preguntas: qué sonido pidió la persona, si la página necesita una entrada del dispositivo, qué procesamiento es necesario y si el resultado se guardará o enviará. La reproducción generada normalmente no necesita permiso de dispositivo. La captura del micrófono suele requerir una decisión explícita de getUserMedia(). Una grabación o un resultado de análisis es dato de la aplicación y no debe conservarse ni subirse sin una elección comprensible.
Este artículo trata usos normales, límites de acceso, controles accesibles, procesamiento local y recuperación cuando falta un contexto o una entrada. No explica la recolección de huellas de audio ni cómo eludir permisos. Consulta el resumen de huellas de audio y la guía de privacidad entre superficies para ese contexto.
Elegir el contexto adecuado
AudioContext representa un grafo de audio en tiempo real. Sus nodos pueden generar tonos, decodificar recursos, aplicar ganancia o filtros, analizar un flujo y enviarlo a una salida. Es apropiado para un sintetizador, un juego o efectos que responden a una acción. Incluye controles visibles para iniciar, pausar y detener.
OfflineAudioContext renderiza un grafo en un AudioBuffer sin enviarlo a los altavoces. Sirve para exportar un efecto o preparar una edición, pero no sustituye el consentimiento del micrófono ni convierte una grabación remota en local. Explica qué representa el búfer y deja que la persona decida si lo guarda o comparte.
La especificación de W3C define nodos, conexiones, canales y programación; MDN documenta las interfaces. El soporte y la política de reproducción automática varían. Maneja un contexto suspendido, nodos ausentes, errores de decodificación y salidas no disponibles. No prometas que todos los navegadores aceptarán el mismo nodo o frecuencia de muestreo.
Iniciar la reproducción con control
El navegador puede exigir un gesto del usuario antes de producir sonido audible. Presenta un botón claro y llama a resume() dentro de esa acción cuando proceda. Informa si se inició, sigue suspendido o necesita otra acción. Volumen, silencio, pausa y parada deben tener nombres accesibles y no depender solo de atajos de teclado.
Reproducir no equivale a grabar. Decodificar un archivo, generar un tono o conectar un elemento multimedia no concede acceso al micrófono. Si la página lo necesita, explica el motivo antes del aviso y muestra un estado persistente mientras la pista está activa; la persona debe poder detenerla sin cerrar la pestaña.
Solicitar entrada solo cuando hace falta
La captura suele comenzar con navigator.mediaDevices.getUserMedia({ audio: ... }). Puede rechazarse por una negativa, por un documento no autorizado, por falta de dispositivo o por restricciones imposibles. Trata el rechazo como una rama normal y conserva el modo que no graba.
Describe el propósito: “usar el micrófono para practicar afinación” o “grabar una nota de voz para este borrador”. No pidas vídeo si solo necesitas audio y no pidas micrófono para desbloquear una reproducción. Mientras el flujo esté activo, muestra una indicación inequívoca y controles de parar y silenciar. Explica si el audio queda en la pestaña, se guarda localmente o se envía a un servicio. Una carga opcional requiere una acción separada y un destino claro.
El permiso puede revocarse y el dispositivo puede desaparecer. La interfaz debe ofrecer reintento o alternativa local, no repetir avisos en bucle ni presentar la negativa como un fallo del dispositivo.
Analizar, grabar y exportar
AnalyserNode puede alimentar un medidor, afinador o ayuda de accesibilidad. Conserva solo el búfer temporal necesario para la tarea. Para grabar, usa una opción compatible como MediaRecorder para un flujo multimedia. Informa del comienzo, el final, el formato y si el archivo es local o remoto; ofrece cancelar o descartar antes de transferir o guardar de forma permanente.
Canales, frecuencias y códecs pueden variar. Lee la configuración real en vez de prometer un hardware universal. Si falta un formato, ofrece otro documentado o una descarga que conserve el contenido; nunca generes silenciosamente un archivo vacío. Distingue el original de una copia con efectos y marca la exportación como una acción separada.
Accesibilidad y límites de privacidad
Los controles necesitan nombres accesibles, foco visible y estados anunciados. Un gráfico de onda puede complementar, pero no sustituir, los botones de reproducir, pausar, buscar, silenciar y grabar. Las instrucciones esenciales también deben existir como texto, subtítulos o señales visuales. Empieza a un volumen razonable, evita bucles inesperados y ofrece silencio rápido.
Establecer límites de privacidad para el audio
El procesamiento puede permanecer local. Si hace falta un servicio, envía solo lo necesario y explica el motivo. Una nota de voz, una transcripción y el audio original tienen necesidades distintas. La carga debe ser una elección explícita. El estado del contexto, la frecuencia y los valores del análisis no demuestran identidad; los registros deben describir resultados de la tarea, no perfiles del dispositivo.
Recuperación y fuentes
Cuando un formato no está disponible, ofrece una alternativa documentada y conserva el trabajo que pueda recuperarse.
Las pruebas de permisos, dispositivos y accesibilidad deben repetir las mismas decisiones que verá la persona.
Detén la pista de entrada cuando termina la grabación y libera los búferes temporales que ya no hacen falta.
Una página abierta durante mucho tiempo no debe mantener un medidor o un historial de análisis activo sin motivo.
El estado visible puede indicar que la captura terminó mientras la reproducción sigue disponible.
Al volver a un borrador, restaura el archivo elegido, pero pide de nuevo iniciar una captura.
Una preferencia de volumen no equivale a una autorización de micrófono.
Cancelar una exportación no debe borrar el original que aún está en la pestaña.
El mensaje de error debe nombrar la acción afectada y proponer una recuperación concreta.
Después de retirar un dispositivo, ofrece otro archivo o un modo de práctica sin grabación.
Un nuevo intento de permiso debe comenzar con una acción clara, no con un bucle automático.
Un componente incrustado debe explicar su propio límite de permisos y el destino de los datos.
Los estados documentados ayudan a soporte a distinguir repetir, importar y continuar editando.
Las pruebas de teclado y lector de pantalla deben cubrir los mismos estados que las pruebas visuales.
La vista previa local no debe implicar que ya existe una copia remota.
El servicio puede conservar una exportación sin volver a cargar audio nuevo.
Separar estos estados mantiene comprensible el límite entre procesamiento y transferencia.
La misma claridad permite explicar el flujo a soporte y a usuarios nuevos.
Fuentes públicas
Artículos Relacionados
Lleva BotBrowser de la investigación a producción
Usa estas guías para entender el modelo y después avanzar hacia validación multiplataforma, contextos aislados y despliegue de navegador preparado para escalar.