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](https://reactnative.dev/), 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](https://expo.dev/) 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](https://docs.expo.dev/).

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
```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](https://palletsprojects.com/p/flask/) en Python qui accepte les données audio :

app.py
```Python
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](https://reactnative.dev/)

- Expo : [https://expo.dev](https://expo.dev)

- Flask : [https://palletsprojects.com/p/flask](https://palletsprojects.com/p/flask)


large_cover.jpg

medium_cover.jpg

small_cover.jpg

thumbnail_cover.jpg

Vous avez souvent besoin d'enregistrer des données audio sur un appareil mobile et de les envoyer à un serveur pour un traitement ultérieur. Dans cet article, je vous montre comment faire cela avec React Native et Flask.

Application d'enregistrement audio React Native

Veuillez entrer une adresse e-mail valide.

Je suis heureux de répondre à toutes les questions que vous pourriez avoir. Ou simplement dis bonjour !

Réflexions par Thomas Derflinger

Mobile catégorie

Application d'enregistrement audio React Native