.png)
Construye tu propio visualizador de forma de onda de audio en vivo con React Native
Motivación
No existen muchas bibliotecas conocidas para visualizar en tiempo real el audio grabado con una forma de onda en React Native. Así que, por qué no crear la tuya y mantener el control total del diseño y el rendimiento
Demo
Imagina una tira de barras que reacciona al volumen de tu voz mientras grabas, suave y fluida, con un estilo minimalista y sin librerías extra pesadas. Eso es lo que vas a lograr a continuación
Suposiciones del entorno
react-native 0.79.5
expo 53.0.17
expo-av 15.1.7
react-native-svg 15.12.1
Ejecución recomendada en iOS con el comando npx expo run:ios
1. Proceso de grabación
1.1 Activar el metering
El truco está en habilitar isMeteringEnabled en prepareToRecordAsync de expo-av. Con esto consigues datos de nivel de audio en tiempo real, expresados en decibelios, ideales para transformar en barras
Paso a paso
Solicita permisos de audio
Configura el modo de audio para permitir grabación, respetar el modo silencio y mantenerse activo en segundo plano
Prepara la grabación con opciones de formato m4a aac a 44100 Hz y canales 2, ajusta a tus necesidades
Muy importante isMeteringEnabled true
Inicia la grabación
1.2 Leer el estado de la grabación de forma periódica
Consulta el estado cada 100 ms. Si isRecording es verdadero y metering es un número, guarda ese valor en un buffer de niveles. Limita el tamaño para no saturar la pantalla, por ejemplo conserva solo las últimas 100 muestras
Ejemplo conceptual del estado
canRecord true, durationMillis 602, isRecording true, mediaServicesDidReset false, metering valor en decibelios
Lo que nos interesa es metering
Recordatorio rápido sobre decibelios
0 dB es el máximo nivel de grabación
-160 dB es silencio
2. Visualización de la forma de onda con SVG
No necesitas trigonometría ni transformadas complicadas para un efecto atractivo. Una forma de onda estilo grabadora moderna puede dibujarse con barras verticales dentro de un lienzo SVG
Cómo funciona
Por cada muestra de audio dibuja un rectángulo
La altura depende del volumen, el ancho puede ser fijo, por ejemplo 3
Coloca cada barra a lo largo del eje X con un espaciado fijo, y céntrala verticalmente para que crezca hacia arriba y hacia abajo desde el centro
Conversión de dB a amplitud
Usa la fórmula estándar amplitud = Math.pow(10, db dividido 20)
Para hacer la curva más manejable, desplaza el nivel antes de convertir. Ejemplos con un desplazamiento de 40
Nivel original -60 dB casi silencio amplitud Math.pow(10, -60 mas 40 dividido 20) igual 0.1
Nivel original -20 dB volumen moderado amplitud Math.pow(10, -20 mas 40 dividido 20) igual 10
Nivel original 0 dB volumen máximo amplitud Math.pow(10, 0 mas 40 dividido 20) igual 100
Después normaliza y escala a la altura disponible. Un factor práctico es alturaBarra igual max de 1 y amplitud normalizada por altura total por 0.05. Ajusta ese 0.05 para controlar sensibilidad visual
Parámetros típicos del lienzo
ancho 358, alto 280, anchoBarra 3, espacioBarra 1, barrasMax por piso de ancho dividido anchoBarra mas espacioBarra, medioAlto igual alto dividido 2
Para la posición de cada barra
x igual indice por anchoBarra mas espacioBarra
y igual medioAlto menos mitadAlturaBarra
Sugerencia de rendimiento
Recorta el buffer a barrasMax para evitar dibujar más barras de las que caben en pantalla
Resumen
Combinando expo-av para capturar el nivel de audio en vivo y react-native-svg para pintar barras, puedes crear un visualizador de forma de onda claro, ligero y totalmente personalizable, sin depender de librerías externas adicionales. Es ideal para apps de notas de voz, mensajería, asistentes de voz o herramientas creativas
Consejos prácticos
Aplica un factor de suavizado si quieres transiciones más fluidas por ejemplo un promedio móvil de 3 a 5 muestras
Usa colores con buen contraste en modo claro y oscuro
Si grabas sesiones largas, almacena muestras reducidas cada cierto tiempo para no crecer en memoria
Por qué hacerlo así
Controlas el diseño y el comportamiento al milímetro
Evitas dependencias y mantienes tu app ligera
Escala sin fricción y puedes añadir efectos como barras redondeadas, gradientes o reflejos
Q2BSTUDIO a tu lado
En Q2BSTUDIO somos una empresa de desarrollo de software con enfoque en aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure e inteligencia de negocio. Si necesitas crear una grabadora con forma de onda en React Native, integrarla con analítica, agentes IA o desplegarla con pipelines seguros, nuestro equipo puede ayudarte de principio a fin
Descubre cómo abordamos proyectos de aplicaciones a medida y plataformas multiplataforma visitando nuestra página de desarrollo de aplicaciones y software multiplataforma. Y si buscas potenciar tu producto con modelos avanzados, asistentes conversacionales o ia para empresas, te invitamos a conocer nuestros servicios de inteligencia artificial
Palabras clave naturales que cubrimos en este artículo y que forman parte de nuestro día a día aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA, power bi
Checklist rápido para tu implementación
Permisos de audio solicitados y modo de audio configurado
isMeteringEnabled activado en prepareToRecordAsync
Polling cada 100 ms con buffer limitado a las últimas muestras
Conversión de dB a amplitud con Math.pow 10, db dividido 20 y un desplazamiento controlado
Dibujo de barras con react-native-svg y centrado vertical
Optimización visual suavizado, colores, gradientes y rendimiento
Con esto ya tienes los cimientos para un visualizador de audio en vivo atractivo y profesional en React Native, listo para integrarse en tu app de grabación, mensajería de voz o herramienta creativa
