Application d'enregistrement audio React Native

React Native permet de créer rapidement des applications mobiles performantes en utilisant une seule base de code JavaScript ou TypeScript. Il est particulièrement facile pour les développeurs web React d'apprendre React Native. Dans cet article, je vous montre comment construire des applications mobiles qui enregistrent de l'audio et envoient les données audio à un backend Flask.

React Native App

Pour les développeurs de React Native, il existe une bibliothèque d'amélioration avec des outils qui facilitent la création rapide d'applications mobiles multiplateformes. Il s'agit de Expo et c'est la méthode recommandée pour créer des applications web React Native.

Pour savoir comment installer Expo, consultez le site Web d'Expo.

Voici l'application Expo TypeScript qui enregistre de l'audio en cliquant sur le bouton "Start Recording".

Lorsque vous avez terminé votre enregistrement, cliquez sur "Stop Recording". Le fichier audio WAV ou MP4 est ensuite envoyé au backend Flask pour un traitement ultérieur.

App.tsx

import * as React from "react" ;
import { Text, View, StyleSheet, Button } from "react-native" ;
import { Audio } from "expo-av" ;
import * as FileSystem de "expo-file-system" ;

const FLASK_BACKEND = "http://your-flask-ip:5000/audio" ;

export default function App() {
  const [recording, setRecording] = React.useState() ;
  const [text, setText] = React.useState("") ;

  async function startRecording() {
    try {
      await Audio.requestPermissionsAsync() ;
      await Audio.setAudioModeAsync({
        allowsRecordingIOS : true,
        playsInSilentModeIOS : true,
      }) ;
      const { recording } = await Audio.Recording.createAsync({
        android : {
          extension : ".mp4",
          audioEncoder : Audio.RECORDING_OPTION_ANDROID_AUDIO_ENCODER_AAC,
          outputFormat : Audio.RECORDING_OPTION_ANDROID_OUTPUT_FORMAT_MPEG_4,
        },
        ios : {
          extension : ".wav",
          sampleRate : 44100,
          numberOfChannels : 2,
          bitRate : 128000,
          audioQuality : Audio.RECORDING_OPTION_IOS_AUDIO_QUALITY_HIGH,
          outputFormat : Audio.RECORDING_OPTION_IOS_OUTPUT_FORMAT_LINEARPCM,
        },
      }) ;
      setRecording(recording) ;
    } catch (err) {
      console.error("Failed to start recording", err) ;
    }
  }

  async function stopRecording() {
    setRecording(undefined) ;
    await recording.stopAndUnloadAsync() ;
    const uri = recording.getURI() ;

    try {
      const response = await FileSystem.uploadAsync(
        FLASK_BACKEND,
        uri
      ) ;
      const body = JSON.parse(response.body) ;
      setText(body.text) ;
    } catch (err) {
      console.error(err) ;
    }
  }

  return (
    <Visualisation style={styles.container}>
      <Button
        title={enregistrement ? "Stop Recording" : "Start Recording"}
        onPress={recording ? stopRecording : startRecording}
      />
      <Text>{text}</Text>
    </View>
  ) ;
}

const styles = StyleSheet.create({
  conteneur : {
    flex : 1,
    backgroundColor : "#fff",
    alignItems : "center",
    justifyContent : "center",
  },
}) ;

Notez qu'il existe deux formats audio différents utilisés pour l'enregistrement du audio en fonction de la plate-forme.

Backend Flask

Du côté du backend, il s'agit d'un service web minimal Flask en Python qui accepte les données audio :

app.py

from flask import Flask
from flask import request
from flask import Response
from flask_cors import CORS
from pprint import pprint
import json

app = Flask(__name__)
CORS(app)

@app.route('/audio', methods=['POST'])
def process_audio():
    data = request.get_data()
    data_length = request.content_length

    if (data_length > 1024 * 1024 * 10):
        return 'Fichier trop volumineux!', 400

    # process data here:
    print ("Traitement des données: ", data)

    return json.dumps({ "text": "Audio traité avec succès!" }), 200

Vous pouvez imaginer faire toutes sortes de traitements audio dans cette application Flask. Par exemple, vous pourriez stocker les données dans un stockage en nuage et ensuite faire un traitement IA/ML sur ces données.

Votre seule limite est votre imagination.

Conclusion

Ces deux programmes simples peuvent être votre modèle pour faire des applications audio étonnantes sur le téléphone mobile avec le soutien d'un service dorsal. J'espère que vous avez pu acquérir quelques connaissances dans le domaine de l'audio et vous permettre de démarrer rapidement.

Références

• React Native : https://reactnative.dev

• Expo : https://expo.dev

• Flask : https://palletsprojects.com/p/flask