Grabación de audio en React Native

En este tutorial, vamos a aprender cómo grabar y reproducir audio en aplicaciones React Native. Vamos a construir una pantalla simple que admita funciones como grabar audio, reproducir archivos de audio, pausar y reanudar, así como restablecer transmisiones de audio. La aplicación final se verá como la imagen de abajo.

Grabar y reproducir audio en aplicaciones móviles es una característica muy popular. Afortunadamente, grabar y reproducir audio en las aplicaciones React Native se puede hacer fácilmente. Esto es gracias al ecosistema Expo que admite fácilmente la grabación de sonido en React Native. Sin embargo, si necesitamos agregar alguna función que requiera que migremos del sistema Expo a React Native CLI, es posible que debamos esforzarnos mucho más en su configuración.

Como resultado, es posible que necesitemos usar un paquete de terceros. Después de mucha investigación, se me ocurrió un paquete que cumple con nuestros requisitos para grabar y reproducir audio en React Native. El nombre del paquete es react-native-audio-recorder-player . El paquete es fácil de configurar y nos proporciona módulos y componentes robustos para implementar un grabador y reproductor de audio en aplicaciones React Native.

Sin más preámbulos, ¡comencemos!

requisitos previos

Para realizar este tutorial, primero debemos preparar nuestro entorno de desarrollo React Native. Para ello, podemos seguir fácilmente otros tutoriales en Instamobile como el que describe cómo configurar tu entorno de desarrollo React Native .

Instalación y configuración del paquete

Primero, necesitamos instalar el paquete react-native-audio-recorder-player usando yarn o npm . Prefiero usar yarn , así que usaré yarn y ejecutaré el siguiente comando en la Terminal del proyecto:

 yarn add react-native-audio-recorder-player

Luego, debemos ejecutar el siguiente comando para ejecutar la aplicación en el dispositivo o simulador iOS (simplemente reemplace ios con Android si está ejecutando en Android)

 react-native run -ios

Preparación del componente de la grabadora

Aquí, comenzamos importando los métodos necesarios del paquete react-native-audio-recorder-player como se muestra en el fragmento de código a continuación:

 import AudioRecorderPlayer, { AVEncoderAudioQualityIOSType, AVEncodingOption, AudioEncoderAndroidType, AudioSet, AudioSourceAndroidType, } from 'react-native-audio-recorder-player' ;

Luego, necesitamos crear algunos estados nuevos y también inicializar una nueva instancia de grabadora como se muestra en el fragmento de código a continuación:

 class App extends Component { constructor (props) { super (props); this .state = { isLoggingIn : false , recordSecs : 0 , recordTime : '00:00:00' , currentPositionSec : 0 , currentDurationSec : 0 , playTime : '00:00:00' , duration : '00:00:00' , }; this .audioRecorderPlayer = new AudioRecorderPlayer(); this .audioRecorderPlayer.setSubscriptionDuration( 0.09 ); // optional. Default is 0.1 }

Preparando la interfaz de usuario

Para la implementación de la interfaz de usuario, vamos a utilizar componentes del paquete react-native-paper . Ya tenemos una idea de cómo debería ser un reproductor y una grabadora de audio. Por lo tanto, podemos implementarlo fácilmente en nuestra pantalla. Para un diseño de interfaz de usuario simple para la aplicación, podemos usar el código del siguiente fragmento de código:

 return ( < Card style = {{ flex: 1 , flexDirection: ' row ', alignItems: ' center ', alignContent: ' center ', alignSelf: ' center ' }}> <Background> <Logo /> <Header>InstaPlayer</Header> <Title>{this.state.recordTime}</Title> <Button mode="contained" icon="record" onPress={() => this.onStartRecord()}> RECORD </Button> <Button icon="stop" mode="outlined" onPress={() => this.onStopRecord()} > STOP </Button> <Divider /> <Title>{this.state.playTime} / {this.state.duration}</Title> <Button mode="contained" icon="play" onPress={() => this.onStartPlay()}> PLAY </Button> <Button icon="pause" mode="contained" onPress={() => this.onPausePlay()} > PAUSE </Button> <Button icon="stop" mode="outlined" onPress={() => this.onStopPlay()} > STOP </Button> </Background> </ Card > )

Por lo tanto, obtendremos una grabadora de audio y un reproductor de audio en la misma pantalla que se muestra en la captura de pantalla del simulador a continuación:

Ahora es el momento de implementar las funciones de cada botón en la pantalla.

Grabar audio en React Native

Lo primero que debemos hacer en cualquier aplicación de grabación es implementar la función de grabación. La implementación real es bastante simple para esto. Necesitamos seguir estos sencillos pasos:

En primer lugar, comenzamos definiendo un nombre y extensión de archivo de audio. En segundo lugar, definimos la preferencia de formato de audio. Por último, comenzamos a grabar audio y agregamos un tiempo de grabación al estado.

La implementación de esto se proporciona en el siguiente fragmento de código:

 onStartRecord = async () => { const path = 'hello.m4a' ; const audioSet = { AudioEncoderAndroid : AudioEncoderAndroidType.AAC, AudioSourceAndroid : AudioSourceAndroidType.MIC, AVEncoderAudioQualityKeyIOS : AVEncoderAudioQualityIOSType.high, AVNumberOfChannelsKeyIOS : 2 , AVFormatIDKeyIOS : AVEncodingOption.aac, }; console .log( 'audioSet' , audioSet); const uri = await this .audioRecorderPlayer.startRecorder(path, audioSet); this .audioRecorderPlayer.addRecordBackListener( ( e ) => { this .setState({ recordSecs : e.current_position, recordTime : this .audioRecorderPlayer.mmssss( Math .floor(e.current_position), ), }); }); console .log( `uri: ${uri} ` ); };

Por lo tanto, obtendremos el resultado como se muestra en la captura de pantalla de demostración del emulador a continuación (simplemente presione el botón Grabar ):

Aquí, podemos ver que el temporizador se inicia cuando tocamos el botón GRABAR .

Detener la grabación de audio

La función de detener la grabación también es fácil de implementar. Solo necesitamos llamar al método stopRecorder y restablecer el contador de tiempo a cero usando el código del siguiente fragmento de código:

 onStopRecord = async () => { const result = await this .audioRecorderPlayer.stopRecorder(); this .audioRecorderPlayer.removeRecordBackListener(); this .setState({ recordSecs : 0 , }); console .log(result); };

Como puede notar, obtenemos el resultado como se muestra en la siguiente captura de pantalla de demostración:

Por lo tanto, el temporizador se detiene cuando tocamos el botón DETENER.

Reproductor de audio para reproducir audio en React Native

Ya que hemos terminado con las funciones de grabación y detención de grabación, ahora tenemos un archivo de audio para reproducir. Para implementar la función de reproducción, debemos llamar al método startPlayer y pasar la ruta al archivo que acabamos de grabar. Luego, tenemos que ajustar el volumen.

Una vez que se reproduce el audio, debemos configurar una función de devolución de llamada para detener la reproducción cuando el indicador del contador de reproducción alcance el punto de finalización. También debemos agregar el tiempo de reproducción actual al estado para mostrar el contador correctamente en la interfaz de usuario.

La implementación de esto se proporciona en el siguiente fragmento de código:

 onStartPlay = async (e) => { console .log( 'onStartPlay' ); const path = 'hello.m4a' const msg = await this .audioRecorderPlayer.startPlayer(path); this .audioRecorderPlayer.setVolume( 1.0 ); console .log(msg); this .audioRecorderPlayer.addPlayBackListener( ( e ) => { if (e.current_position === e.duration) { console .log( 'finished' ); this .audioRecorderPlayer.stopPlayer(); } this .setState({ currentPositionSec : e.current_position, currentDurationSec : e.duration, playTime : this .audioRecorderPlayer.mmssss( Math .floor(e.current_position), ), duration : this .audioRecorderPlayer.mmssss( Math .floor(e.duration)), }); }); };

Por lo tanto, obtendremos el resultado como se muestra en la siguiente captura de pantalla de demostración:

Como puede ver, cuando tocamos el botón PLAY, el audio comienza a reproducirse.

Pausa del reproductor de audio

Implementar una función de pausa es simple. Solo necesitamos llamar al método pausePlayer, cuando se presiona el botón PAUSE. Podemos hacer esto usando el siguiente fragmento de código:

 onPausePlay = async (e) => { await this .audioRecorderPlayer.pausePlayer(); };

Por lo tanto, obtendremos el resultado como se muestra en la siguiente captura de pantalla de demostración:

Aquí, podemos ver que cuando presionamos el botón PAUSE, el reproductor se detiene, y cuando presionamos el botón Play nuevamente, comienza a reproducirse desde el mismo punto donde lo detuvimos.

Detener el reproductor de audio en React Native

Para detener el reproductor, debemos llamar al método stopPlayer. Luego, debemos eliminar los datos de reproducción llamando al método removePlayBackListener y restablecer el contador a cero nuevamente. La característica para activar la acción de detención se proporciona como una función en el fragmento de código a continuación:

 onStopPlay = async (e) => { console .log( 'onStopPlay' ); this .audioRecorderPlayer.stopPlayer(); this .audioRecorderPlayer.removePlayBackListener(); };

Por lo tanto, obtendremos el resultado como se muestra en la siguiente captura de pantalla:

Aquí, podemos ver que cuando presionamos el botón STOP, el reproductor se detiene y después de presionar el botón PLAY, el contador comienza desde este principio.

Finalmente, hemos implementado con éxito la grabadora y el reproductor de audio en la aplicación React Native junto con un diseño de interfaz de usuario intuitivo. Con suerte, ahora sabe cómo grabar audio en React Native y cómo reproducir los archivos de audio grabados en un reproductor de audio React Native.

Conclusión

Ha sido una característica interesante para ponernos manos a la obra. Implementar una grabadora y reproductor de audio en un React Native puede parecer difícil, pero de hecho, es bastante simple gracias a una poderosa biblioteca. Este tutorial proporciona una guía detallada sobre cada paso para que sea aún más simple. El paquete que usamos para grabar y reproducir audio es bastante robusto y también fácil de implementar. Asegúrate de ensuciarte las manos con él.

Podemos hacer toneladas de cosas en React Native utilizando esta función (piense en la aplicación de clonación de Spotify o Podcasts). En Instamobile, usamos grabación y reproducción de audio en todas las aplicaciones que tienen una función de chat, como nuestra plantilla de aplicación de chat .

Publicado originalmente en https://www.instamobile.io el 20 de agosto de 2020.