Tutoriel React Native Record Audio


Dans ce didacticiel, nous allons apprendre à enregistrer et à lire de l’audio dans les applications React Native. Nous allons créer un écran simple qui prend en charge des fonctionnalités telles que l’enregistrement audio, la lecture de fichiers audio, la mise en pause et la reprise, ainsi que la réinitialisation des flux audio. L’application finale ressemblera à l’image ci-dessous.

L’enregistrement et la lecture audio dans les applications mobiles sont une fonctionnalité très populaire. Heureusement, enregistrer et lire de l’audio dans les applications React Native peut être fait facilement. C’est grâce à l’écosystème Expo qui prend facilement en charge l’enregistrement sonore sur React Native. Cependant, si nous devons ajouter une fonctionnalité qui nous oblige à migrer du système Expo vers React Native CLI, nous devrons peut-être consacrer beaucoup plus d’efforts à sa configuration.

Par conséquent, nous pouvons avoir besoin d’utiliser un package tiers. Après de nombreuses recherches, j’ai mis au point un package qui répond à nos exigences pour l’enregistrement et la lecture audio dans React Native. Le nom du package est Réagir-lecteur-enregistreur-audio-natif. Le package est facile à configurer et nous fournit des modules et des composants robustes pour implémenter un enregistreur audio et un lecteur dans les applications React Native.

Sans plus tarder, commençons!

Conditions préalables

Pour suivre ce didacticiel, nous devons d’abord préparer notre environnement de développement React Native. Pour cela, nous pouvons facilement suivre d’autres tutoriels sur Instamobile comme celui décrivant comment configurer votre environnement de développement React Native.

Installation et configuration du package

Tout d’abord, nous devons installer le Réagir-lecteur-enregistreur-audio-natif paquet utilisant fil ou npm. Je préfère utiliser fil donc je vais utiliser fil et exécutez la commande suivante dans le terminal du projet:

Ensuite, nous devons exécuter la commande suivante pour exécuter l’application sur l’appareil iOS ou le simulateur (remplacez simplement ios avec Android si vous utilisez Android)

Préparation du composant enregistreur

Ici, nous commençons par importer les méthodes nécessaires depuis le Réagir-lecteur-enregistreur-audio-natif package comme indiqué dans l’extrait de code ci-dessous:

Ensuite, nous devons créer quelques nouveaux états et également initialiser une nouvelle instance d’enregistreur comme illustré dans l’extrait de code ci-dessous:

Préparation de l’interface utilisateur

Pour l’implémentation de l’interface utilisateur, nous allons utiliser des composants du réagir-native-paper paquet. Nous avons déjà une idée de ce à quoi un lecteur et un enregistreur audio devraient ressembler. Par conséquent, nous pouvons facilement l’implémenter sur notre écran. Pour une mise en page d’interface utilisateur simple pour l’application, nous pouvons utiliser le code de l’extrait de code suivant:

Par conséquent, nous obtiendrons un enregistreur audio et un lecteur audio sur le même écran que celui affiché dans la capture d’écran du simulateur ci-dessous:


Maintenant, il est temps d’implémenter les fonctions pour chaque bouton à l’écran.

Enregistrer de l’audio dans React Native

La première chose que nous devons faire dans toute application d’enregistrement est d’implémenter la fonction d’enregistrement. La mise en œuvre réelle est assez simple pour cela. Nous devons suivre ces étapes simples:

  1. Tout d’abord, nous commençons par définir un nom et une extension de fichier audio.
  2. Deuxièmement, nous définissons la préférence de format audio.
  3. Enfin, nous commençons à enregistrer de l’audio et ajoutons un temps d’enregistrement à l’état.

La mise en œuvre de ceci est fournie dans l’extrait de code ci-dessous:

Par conséquent, nous obtiendrons le résultat comme indiqué dans la capture d’écran de démonstration de l’émulateur ci-dessous (appuyez simplement sur le bouton Record bouton):


Ici, nous pouvons voir que la minuterie démarre lorsque nous tapons sur le RECORD bouton.

Arrêt de l’enregistrement audio

La fonction d’arrêt d’enregistrement est également facile à mettre en œuvre. Nous avons juste besoin d’appeler le stopRecorder et réinitialisez le compteur de temps à zéro à l’aide du code de l’extrait de code suivant:

Comme vous pouvez le remarquer, nous obtenons le résultat comme indiqué dans la capture d’écran de démonstration ci-dessous:


Par conséquent, la minuterie s’arrête lorsque nous tapons sur le bouton STOP.

Lecteur audio pour lire de l’audio dans React Native

Puisque nous en avons terminé avec les fonctions d’enregistrement et d’arrêt d’enregistrement, nous avons maintenant un fichier audio à lire. Afin de mettre en œuvre la fonction de lecture, nous devons appeler le startPlayer et passez le chemin vers le fichier que nous venons d’enregistrer. Ensuite, nous devons régler le volume. Une fois l’audio lu, nous devons définir une fonction de rappel pour arrêter la lecture lorsque l’indicateur du compteur de lecture atteint le point d’achèvement. Nous devons également ajouter la durée de lecture actuelle à l’état pour afficher correctement le compteur dans l’interface utilisateur. La mise en œuvre de ceci est fournie dans l’extrait de code ci-dessous:

Par conséquent, nous obtiendrons le résultat comme indiqué dans la capture d’écran de démonstration ci-dessous:



Comme vous pouvez le voir, lorsque nous appuyons sur le bouton PLAY, la lecture audio commence.

Mettre le lecteur audio en pause

La mise en œuvre d’une fonction de pause est simple. Nous avons juste besoin d’appeler le pausePlayer méthode, lorsque le bouton PAUSE est enfoncé. Nous pouvons le faire en utilisant le morceau de code suivant:

Par conséquent, nous obtiendrons le résultat comme indiqué dans la capture d’écran de démonstration ci-dessous:

Ici, nous pouvons voir que lorsque nous appuyons sur le bouton PAUSE, le joueur se met en pause, et lorsque nous appuyons à nouveau sur le bouton Lecture, il commence à jouer à partir du même point où nous l’avons arrêté.

Arrêt du lecteur audio dans React Native

Afin d’arrêter le joueur, nous devons appeler le stopPlayer méthode. Ensuite, nous devons supprimer les données de lecture en appelant removePlayBackListener méthode et remettez le compteur à zéro. La fonctionnalité permettant de déclencher l’action d’arrêt est fournie en tant que fonction dans l’extrait de code ci-dessous:

Par conséquent, nous obtiendrons le résultat comme indiqué dans la capture d’écran ci-dessous:

Ici, nous pouvons voir que lorsque nous appuyons sur le bouton STOP, le joueur s’arrête et après avoir appuyé sur le bouton PLAY, le compteur démarre à partir de ce début.

Enfin, nous avons implémenté avec succès l’enregistreur audio et le lecteur dans l’application React Native avec une disposition d’interface utilisateur intuitive. J’espère que vous savez maintenant comment enregistrer de l’audio dans React Native et comment lire les fichiers audio enregistrés dans un lecteur audio React Native.

Conclusion

Cela a été une fonctionnalité intéressante sur laquelle mettre la main. Mettre en œuvre un enregistreur et un lecteur audio dans un React Native peut sembler difficile, mais en fait, c’est assez simple grâce à une bibliothèque puissante. Ce didacticiel fournit des conseils détaillés sur chaque étape afin que cela devienne encore plus simple. Le package que nous avons utilisé pour enregistrer et lire de l’audio est également assez robuste et facile à mettre en œuvre. Assurez-vous de vous salir les mains.

Close Menu