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

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

Demasiado Largo; Para Leer

 Add passwordless user experiences to your app

HackerNoon Mobile

Grabación de audio en React Native

Demasiado Largo; Para Leer

Company Mentioned

@kriss

HISTORIAS RELACIONADAS