La mejor biblioteca de reproductores de audio para aplicaciones nativas React

@programacion

Un reproductor de música/audio es un componente esencial en muchas aplicaciones móviles centradas en el entretenimiento. Si elige React Native para desarrollar su reproductor de audio, puede terminar eligiendo entre una de las dos opciones de biblioteca populares: React-Native-Track-Player (RN-Track-Player) y React-Native-Sound (RN-Sound).

Con esto en mente, repasemos los pros y los contras de cada biblioteca.

El contenido de este artículo se divide de la siguiente manera para comodidad del lector.

React-Native-Sound
React-Native-Track-Player
Opciones de reproducción de audio
Cargando archivos de audio
Reproducción de audio (estéreo y mono)
Documentación
Soporte comunitario
Conclusión

1. Sonido nativo de React

React-Native-Sound es más una clase que un componente de clase que posee la capacidad de manipular instancias con métodos predefinidos sin actualizar accesorios o estados. El tamaño descomprimido de la biblioteca es de aproximadamente 88 KB y tiene licencia para el MIT. Es uno de los módulos React Native populares para reproducir archivos de audio en iOS, Android y Windows.

La declaración en la documentación de NPM de la biblioteca que dice que 'la biblioteca está en alfa y puede tener errores'. Esto puede hacer que un desarrollador que quiera usar la biblioteca se muestre reacio. Sin embargo, esto no ha causado ningún impacto en la cantidad de descargas por semana.

La versión actual de la biblioteca es la 0.11.2 y desde 2016 hasta 2022 se han lanzado 34 versiones.

RN-Sound no se ejecuta en un servicio separado en Android. Por lo tanto, limita el uso de la biblioteca solo para reproducir pistas de audio simples en primer plano, como efectos de sonido y mensajes de voz, etc. Sí, puede crear una aplicación de música completa con RN-Sound, pero hablaremos en el próximo capítulo. desarrollado deliberadamente para implementar reproductores de música.

2. React-Native-Track-Player

React-Native-Track-Player es un módulo de audio React Native completo implementado para música/cualquier aplicación de audio móvil. El tamaño desempaquetado de la biblioteca es de aproximadamente 2,57 MB y tiene licencia para Apache 2.0.

El RN-Track-Player se lanzó después de RN-Sound como una solución para los inconvenientes que presentaba RN-Sound. El objetivo era construir una biblioteca de reproductores de audio de la biblioteca React Native, liviana, totalmente personalizable y compatible con múltiples plataformas, con todos los principales soportes de control de medios, y la expectativa se convirtió en un éxito. La mayoría de las funciones nativas que siguen los mismos principios de diseño seguidos por las aplicaciones de música real se construyen juntas para brindar una excelente experiencia tanto al usuario como al desarrollador.

El soporte de Android para react-native-track-player se basa en la biblioteca de reproductores multimedia ExoPlayer de Google. El RN-Track-Player se ejecuta como un servicio separado en Android, lo que resulta en menos dependencias y alta estabilidad. De todos modos, RN-Track-Player también es compatible con iOS y Windows.

Sin embargo, hubo muchos errores en las versiones de lanzamiento 1.0. Con el lanzamiento de la versión 2.0 (la versión actual es 2.1.2) de la biblioteca, la mayoría de los problemas se han resuelto con éxito y es estable y seguro para usar en aplicaciones comerciales. Desde 2017 hasta 2022, se lanzaron 78 versiones de la biblioteca.

3. Opciones de control de audio

Casi todas las opciones esenciales de control de audio están disponibles tanto en react-native-sound como en track-player.

Las funciones principales, como reproducción, devolución de llamada de finalización de recuperación, pausa, reanudar, detener, saltar hacia adelante/atrás, restablecer, obtener duración, obtener volumen del sistema, cambiar volumen, cambiar el modo de reproducción (bucles de audio), cambiar la velocidad, obtener el tiempo de reproducción actual son algunas funciones principales admitidas por ambas bibliotecas para dispositivos móviles Android e iOS.

Tanto en RN-Sound como en RN-Track-Player, están disponibles las opciones de reproducción de audio de fondo, reproducción en la barra de notificaciones y pantalla de bloqueo [Figura 3].

Pero hay algunas variaciones. En RN-Track-Player, la reproducción de audio, el control de audio y la personalización de la opción 'reproducir en la barra de notificaciones' solo se admiten en Android, mientras que en iOS solo se admite la reproducción de audio.

En RN-Sound, la opción 'reproducir en la barra de notificaciones' solo está disponible en Android y no se puede personalizar.

Una genial función incorporada del RN-Track-Player es que la apariencia de la barra de notificación cambia con el 'color dominante de la ilustración' que se usa con el clip de audio. Por ejemplo, si el color dominante de la obra de arte es el gris, la piel de la obra de arte también se volverá grisácea automáticamente [Figura 4].

4. Carga de archivos de audio en el reproductor

Cargar archivos de audio en el reproductor es otro factor esencial que debe tener en cuenta cuando necesita elegir entre el reproductor de pistas y el sonido nativo de reacción.

RN-Sound puede cargar archivos de audio desde el paquete de aplicaciones, otros directorios (sistema de archivos) o desde la red. Aquí, cargar desde la red se refiere a 'descargar un archivo de audio desde un almacenamiento remoto y luego reproducirlo en el dispositivo'. Sin embargo, la capacidad de transmisión no está implementada en RN-Sound.

Del mismo modo, el reproductor RN-Track también admite la reproducción desde el paquete de aplicaciones, el sistema de archivos y la red remota. Pero es compatible con Streaming, que también es una ventaja adicional al usar RN-Track-Player. La transmisión regular, DASH, HLS y SmoothStreaming son compatibles con Android, mientras que solo las transmisiones regulares y la transmisión HLS son compatibles con iOS. Otra ventaja que viene con la capacidad de transmisión es la transmisión de tasa de bits adaptativa y el soporte de almacenamiento en caché.

Con la transmisión de tasa de bits adaptativa, la aplicación puede cargar el archivo de audio en diferentes tasas de bits según el ancho de banda de la red. Y con el soporte de almacenamiento en caché, la aplicación también puede reproducir archivos de audio en modo fuera de línea.

5. Reproducción de audio (estéreo y mono)

Ambas bibliotecas admiten archivos de audio estéreo y mono. La especialidad es que la siguiente API de RN-Sound puede personalizar la opción de reproducción.

getPan(): Devuelve la posición panorámica estéreo del reproductor de audio (no la panorámica de todo el sistema), que va desde -1,0 (totalmente a la izquierda) hasta 1,0 (totalmente a la derecha). El valor predeterminado es 0.0 (centro).
setPan(): valor {número} Establece el pan, que va desde -1,0 (totalmente a la izquierda) hasta 1,0 (totalmente a la derecha).
getNumberOfChannels: Devuelve el número de canales (1 para sonido mono y 2 para sonido estéreo), o -1 antes de que se cargue el sonido.

Desafortunadamente, RN-Track-Player no tiene ningún método para personalizar, pero admite clips de audio estéreo y mono de forma predeterminada. Por lo tanto, si la aplicación que va a crear requiere funciones especiales para personalizar la reproducción de audio, entonces no es recomendable utilizar RN-Sound, de lo contrario, RN-Track-Player es suficiente.

6. Documentación

Sin duda, la documentación de React-Native-Track-Player es más fácil de usar que la de React-Native-Sound.

Desde la instalación hasta la aplicación de la mayoría de las API disponibles en la biblioteca, se explican suficientemente en la documentación de su reproductor de pistas. Hay una descripción completa del soporte de funciones y eventos integrados en las bibliotecas para los sistemas operativos Android e iOS, por lo que el desarrollador no necesita ejecutar y probar antes de usar la biblioteca.

Por el contrario, la documentación de RN-Sound no es del todo amigable para los desarrolladores. Solo las API esenciales se destacan en la documentación de NPM. Hay algunas documentaciones de API publicadas por varios desarrolladores, pero ninguna de ellas es más descriptiva y completa que la de RN-Track-Player.

7. Apoyo y popularidad de la comunidad

El mayor temor de cualquier desarrollador joven es el escaso apoyo de la comunidad creada en torno a una determinada plataforma. Sí, la mayoría de las veces, es más seguro optar por algo que usa la mayoría porque puede haber al menos una persona que ya enfrente el mismo problema y lo haya resuelto antes de que volvamos a abordarlo nosotros mismos.

Al enfocarse en el apoyo de la comunidad, afortunadamente, hay un crecimiento considerable en los usuarios de ambas bibliotecas. Han planteado varios problemas y, en ambas bibliotecas, la mayoría de estos problemas se han resuelto. Pero la cantidad de problemas sin resolver en react-native-sound es mucho mayor en comparación con Track Player.

De 1100 problemas, solo 49 siguen abiertos en track-player, mientras que 297 de 700 problemas en total están abiertos en react-native-sound. Por lo tanto, se puede observar que la comunidad en torno a los reproductores de pistas es cada vez más grande.

GitHub Repos ( RN-Sound , RN-Track-Player ) de ambas bibliotecas tiene más de 2000 estrellas, pero al considerar las descargas semanales, es obvio que react-native-sound es más popular que track-player [Figura 4 ]. La razón por la que esta tendencia se reconoce como sonido nativo de reacción es más un esqueleto donde los desarrolladores pueden agregar varias funcionalidades.

Si está creando una aplicación de música desde cero, react-native-sound es una mejor opción. Y ser más pequeño en comparación con el reproductor de pistas podría ser otra razón por la cual el sonido nativo de reacción es más popular.

Aquí hay dos mejores proyectos de referencia para RN-Sound y Track-Player antes de comenzar su desarrollo:

Sonido RN: https://github.com/johnsonsu/react-native-sound-player

RN-Track-Player: https://github.com/andordavoti/react-native-track-player

8. Conclusión

Las bibliotecas RN-Sound y RN-Track-Player se utilizan ampliamente en el desarrollo de aplicaciones móviles de audio/música. La popularidad de RN-Track-Player está aumentando debido a la compatibilidad con la transmisión, la personalización masiva y la riqueza de funciones nativas.

Si desea desarrollar una aplicación muy liviana desde cero con la esperanza de integrar funciones avanzadas, RN-Sound es una buena opción.

Pero para admitir las funciones de transmisión en su aplicación, es posible que deba buscar la ayuda de otra biblioteca como React-Native-Audio-Toolkit.

Sin embargo, cualquiera que sea la biblioteca que esté utilizando, para obtener los mejores resultados en el producto de salida final, es posible que deba incorporar otras bibliotecas como React-Native-Slider, React-Native-Vector-Icons, etc. Las funcionalidades de la interfaz de usuario son mejores para implementarse con las bibliotecas anteriores y puede invocar las API en las bibliotecas RN-Track-Player/RN-Sound para implementar la funcionalidad completa.

Fuente:

https://blog.bitsrc.io/the-best-audio-player-library-for-react-native-apps-6048a742eb68