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   . 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. react-native-audio-recorder-player  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   usando   o   . Prefiero usar   , así que usaré   y ejecutaré el siguiente comando en la Terminal del proyecto:  react-native-audio-recorder-player yarn npm yarn yarn   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   con   si está ejecutando en Android)  ios Android   react-native    run -ios  Preparación del componente de la grabadora  Aquí, comenzamos importando los métodos necesarios del paquete   como se muestra en el fragmento de código a continuación:  react-native-audio-recorder-player    AudioRecorderPlayer, { AVEncoderAudioQualityIOSType, AVEncodingOption, AudioEncoderAndroidType, AudioSet, AudioSourceAndroidType, }     ; import 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:     {   (props) {   (props);   .state = {   :   ,   :   ,   :   ,   :   ,   :   ,   :   ,   :   , };   .audioRecorderPlayer =   AudioRecorderPlayer();   .audioRecorderPlayer.setSubscriptionDuration(   );   }       class App extends Component constructor super this isLoggingIn false recordSecs 0 recordTime '00:00:00' currentPositionSec 0 currentDurationSec 0 playTime '00:00:00' duration '00:00:00' this new this 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   . 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:  react-native-paper    (   <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>   ) return <     =       ,   '   ',   '   ',   '   ',   '   ' }}> Card style {{ flex: 1 flexDirection: row alignItems: center alignContent: center alignSelf: center </   > 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 =   () => {   path =   ;   audioSet = {   : AudioEncoderAndroidType.AAC,   : AudioSourceAndroidType.MIC,   : AVEncoderAudioQualityIOSType.high,   :   ,   : AVEncodingOption.aac, };   .log(   , audioSet);   uri =     .audioRecorderPlayer.startRecorder(path, audioSet);   .audioRecorderPlayer.addRecordBackListener(   {   .setState({   : e.current_position,   :   .audioRecorderPlayer.mmssss(   .floor(e.current_position), ), }); });   .log(   ); }; async const 'hello.m4a' const AudioEncoderAndroid AudioSourceAndroid AVEncoderAudioQualityKeyIOS AVNumberOfChannelsKeyIOS 2 AVFormatIDKeyIOS console 'audioSet' const await this this (   ) => e this recordSecs recordTime this Math console `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 =   () => {   result =     .audioRecorderPlayer.stopRecorder();   .audioRecorderPlayer.removeRecordBackListener();   .setState({   :   , });   .log(result); }; async const await this this this recordSecs 0 console  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 =   (e) => {   .log(   );   path =     msg =     .audioRecorderPlayer.startPlayer(path);   .audioRecorderPlayer.setVolume(   );   .log(msg);   .audioRecorderPlayer.addPlayBackListener(   {   (e.current_position === e.duration) {   .log(   );   .audioRecorderPlayer.stopPlayer(); }   .setState({   : e.current_position,   : e.duration,   :   .audioRecorderPlayer.mmssss(   .floor(e.current_position), ),   :   .audioRecorderPlayer.mmssss(   .floor(e.duration)), }); }); }; async console 'onStartPlay' const 'hello.m4a' const await this this 1.0 console this (   ) => e if console 'finished' this this currentPositionSec currentDurationSec playTime this Math duration this Math  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 =   (e) => {     .audioRecorderPlayer.pausePlayer(); }; async await this  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 =   (e) => {   .log(   );   .audioRecorderPlayer.stopPlayer();   .audioRecorderPlayer.removePlayBackListener(); }; async console 'onStopPlay' this this  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.

Super

React Native Templates

Flutter Templates

Read My Stories

Este audio es producido en el idioma original de la historia!

Grabación de audio en React Native

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Cómo mejorar su flujo de trabajo 10 veces: 17 aplicaciones esenciales

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

Cómo mejorar su flujo de trabajo 10 veces: 17 aplicaciones esenciales

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps