Un tutoriel approfondi

téléphone portable. Il y a deux options pour ouvrir le projet:

1. Ouvrez le lien dans le navigateur, scannez le code QR avec votre téléphone mobile, et attendez que le projet se charge
2. Ouvrez le lien avec votre téléphone mobile et cliquez sur " Ouvrez le projet en utilisant Expo ".

Vous pouvez également ouvrir l'application dans le navigateur. Cliquez sur "Ouvrir le projet dans le navigateur". Si vous avez un compte payant sur Appetize.io visitez-le et entrez le code dans le champ pour ouvrir le projet. Si vous n'avez pas de compte, cliquez sur "Ouvrir le projet" et attendez dans une file d'attente au niveau du compte pour ouvrir le projet.

Cependant, je vous recommande de télécharger l'application Expo et d'ouvrir ce projet sur votre téléphone mobile. Découvrez toutes les fonctionnalités de l'application d'enregistrement vidéo et audio

Vous pouvez trouver le code complet de l'application d'enregistrement multimédia dans le référentiel sur GitHub.

Dépendances utilisées pour l'application Développement

Comme mentionné précédemment, l'application d'enregistrement multimédia est développée avec React Native et Expo.

Vous pouvez voir la liste complète des dépendances dans le fichier package.json du référentiel. bibliothèques principales utilisées:

• React-navigation, pour naviguer dans l'application,
• Redux, pour sauvegarder l'état de l'application,
• React-redux, qui sont des liaisons React pour Redux,
• Recomposer, pour écrire les composants 'logic,
• Reselect, pour extraire les fragments d'état de Redux. [1] 9659023] Regardons la structure du projet:

  

  • src / index.js : composant de l'application racine importé dans le fichier app.js ;
  • src / components : composants réutilisables;
  • src / constantes : constantes globales;
  • src / styles : styles globaux, couleurs, tailles et dimensions des polices. [19659010] src / utils : utilitaires utiles et recomposer des enhancers;
  • src / screens : composants d'écrans;
  • src / store : Redux store; [19659010] src / navigation : navigateur de l'application;
  • src / modules : modules Redux divisés par entités comme modules / audio, modules / vidéo, modules / navigation. passez à la partie pratique

    Créer une fonctionnalité d'enregistrement audio avec React Native

    Tout d'abord, il est important de vérifier la documentation pour l'API Audio Expo [1945900] 4]lié à l'enregistrement et à la lecture audio. Vous pouvez voir tout le code dans le référentiel . Je recommande d'ouvrir le code en lisant cet article pour mieux comprendre le processus.

    Lorsque vous lancez l'application pour la première fois, vous avez besoin de l'autorisation de l'utilisateur pour l'enregistrement audio, ce qui implique l'accès au microphone. Utilisons Expo.AppLoading et demandons l'autorisation d'enregistrement en utilisant Expo.Permissions (voir src / index.js ) pendant startAsync

    Attendre Permissions.askAsync (Permissions.AUDIO_RECORDING);

    Les enregistrements audio sont affichés sur un écran séparé dont l'interface utilisateur change en fonction de l'état.

    D'abord, vous pouvez voir le bouton "Démarrer l'enregistrement". Après avoir cliqué sur, l'enregistrement audio commence, et vous trouverez la durée audio actuelle sur l'écran. Après l'arrêt de l'enregistrement, vous devrez taper le nom de l'enregistrement et enregistrer l'audio dans le magasin Redux

    Mon interface d'enregistrement audio ressemble à ceci:

    

    Je peux enregistrer l'audio dans le magasin Redux au format suivant:

     audioItemsIds: [‘id1’, ‘id2’],
    audioItems: {
     'Id1': {
        id: chaîne,
        titre: chaîne,
        recordDate: chaîne de date,
        durée: nombre,
        audioUrl: chaîne,
     }
    }, 

    Écrivons la logique audio en utilisant Recompose dans le conteneur de l'écran src / screens / RecordAudioScreenContainer .

    Avant de commencer l'enregistrement, personnalisez le mode audio avec l'aide de Expo. Audio.set.AudioModeAsync (mode), où mode est le dictionnaire avec les paires valeur-clé suivantes :

    • playsInSilentModeIOS : Un booléen sélectionnant si l'audio de votre expérience doit jouer en mode silencieux sur iOS. Cette valeur par défaut est false
    • permetRecordingIOS : Un booléen sélectionne si l'enregistrement est activé sur iOS. Cette valeur par défaut est false. Remarque: Lorsque ce drapeau est défini sur true, la lecture peut être acheminée vers le récepteur du téléphone, et non vers le haut-parleur.
    • interruptionModeIOS : Enum sélectionnant comment l'audio de votre expérience doit interagir avec l'audio des autres apps sur iOS.
    • shouldDuckAndroid : Un booléen sélectionnant si l'audio de votre expérience devrait être automatiquement réduit en volume ("canard") si l'audio d'une autre application interrompt votre expérience. Cette valeur par défaut est true. Si faux, le son provenant d'autres applications mettra votre audio en pause
    • interruptionModeAndroid : Enum sélectionnant comment l'audio de votre expérience devrait interagir avec l'audio d'autres applications sur Android.

    Note ]: Vous pouvez en savoir plus sur la personnalisation de AudioMode dans la documentation .

    J'ai utilisé les valeurs suivantes dans cette application:

    interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX – Notre enregistrement interrompt l'audio d'autres applications sur IOS.

    playsInSilentModeIOS : true

    shouldDuckAndroid ]: true

    interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX – Notre enregistrement interrompt le son d'autres applications sur Android.

    permetRecordingIOS Deviendra true avant l'enregistrement audio et à False after its completion.

    Pour implémenter ceci, écrivons le gestionnaire setAudioMode avec Recompose .

     withHandlers ({
     setAudioMode: () => async ({permetRecordingIOS}) => {
       essayez {
         wait Audio.setAudioModeAsync ({
           permetRecordingIOS,
           interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX,
           playsInSilentModeIOS: true,
           shouldDuckAndroid: vrai,
           interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX,
         });
       } catch (erreur) {
         console.log (erreur) // eslint-disable-line
       }
     },
    }), 

    Pour enregistrer l'audio, vous devez créer une instance de la classe Expo.Audio.Recording .

     const recording = new Audio.Recording (); 

    Après avoir créé l'instance d'enregistrement, vous pourrez recevoir le statut de l'enregistrement avec l'aide de recordingInstance.getStatusAsync () .

    Le statut de l'enregistrement est un dictionnaire avec les paires clé-valeur suivantes:

    • canRecord: un booléen
    • isRecording: un booléen décrivant si l'enregistrement est en cours d'enregistrement.
    • isDoneRecording : un booléen
    • durationMillis: durée actuelle de l'enregistrement audio.

    Vous pouvez également définir une fonction à appeler à intervalles réguliers avec recordingInstance.setOnRecordingStatusUpdate (onRecordingStatusUpdate)

    Pour mettre à jour l'interface utilisateur, vous devrez appeler setOnRecord ingStatusUpdate et définissez votre propre callback.

    Ajoutons quelques accessoires et un callback d'enregistrement au conteneur.

     withStateHandlers ({
        enregistrement: nul,
        isRecording: faux,
        durationMillis: 0,
        isDoneRecording: false,
        fileUrl: null,
        audioName: '',
      }, {
        setState: () => obj => obj,
        setAudioName: () => audioName => ({nom audio}),
       recordingCallback: () => ({durationMillis, isRecording, isDoneRecording}) =>
          ({durationMillis, isRecording, isDoneRecording}),
      }), 

    Le paramètre de rappel pour setOnRecordingStatusUpdate est:

    recording.setOnRecordingStatusUpdate (props.recordingCallback);

    onRecordingStatusUpdate est appelé chaque 500 millisecondes par défaut. Pour rendre la mise à jour de l'interface utilisateur valide, définissez l'intervalle de 200 millisecondes à l'aide de setProgressUpdateInterval :

    recording.setProgressUpdateInterval (200);

    Après avoir créé une instance de cette classe , appelez prepareToRecordAsync pour enregistrer l'audio.

    recordingInstance.prepareToRecordAsync (options) charge l'enregistreur en mémoire et le prépare pour l'enregistrement. Il doit être appelé avant d'appeler startAsync () . Cette méthode peut être utilisée si l'instance d'enregistrement n'a jamais été préparée

    Les paramètres de cette méthode incluent des options d'enregistrement comme fréquence d'échantillonnage, débit, canaux, format, encodeur et extension. Vous pouvez trouver une liste de toutes les options d'enregistrement dans ce document .

    Dans ce cas, utilisons Audio.RECORDING_OPTIONS_PRESET_HIGH_QUALITY .

    Une fois l'enregistrement préparé, vous pouvez commencez l'enregistrement en appelant la méthode recordingInstance.startAsync () .

    Avant de créer une nouvelle instance d'enregistrement vérifiez si elle a déjà été créée. Le gestionnaire pour commencer l'enregistrement ressemble à ceci:

     onStartRecording: props => async () => {
          essayez {
            if (props.recording) {
              props.recording.setOnRecordingStatusUpdate (null);
              props.setState ({enregistrement: null});
            }
    
            wait props.setAudioMode ({permetRecordingIOS: true});
    
            const enregistrement = new Audio.Recording ();
            recording.setOnRecordingStatusUpdate (props.recordingCallback);
            recording.setProgressUpdateInterval (200);
    
            props.setState ({fileUrl: null});
    
    attendre recording.prepareToRecordAsync (Audio.RECORDING_OPTIONS_PRESET_HIGH_QUALITY);
            attendre recording.startAsync ();
    
            props.setState ({enregistrement});
          } catch (erreur) {
            console.log (erreur) // eslint-disable-line
          }
        }, 

    Vous devez maintenant écrire un gestionnaire pour la fin de l'enregistrement audio. Après avoir cliqué sur le bouton stop, vous devez arrêter l'enregistrement, le désactiver sur iOS, recevoir et enregistrer l'URL locale de l'enregistrement, et définir OnRecordingStatusUpdate et l'instance d'enregistrement sur null :

     onEndRecording: props => async () => {
          essayez {
            attendez props.recording.stopAndUnloadAsync ();
            wait props.setAudioMode ({permetRecordingIOS: false});
          } catch (erreur) {
            console.log (erreur); // eslint-disable-line
          }
    
          if (props.recording) {
            const fileUrl = props.recording.getURI ();
            props.recording.setOnRecordingStatusUpdate (null);
            props.setState ({recording: null, fileUrl});
          }
        }, 

    Après cela, tapez le nom audio, cliquez sur le bouton "continuer" et la note audio sera enregistrée dans le magasin Redux . => () => {
          if (props.audioName && props.fileUrl) {
            const audioItem = {
              id: uuid (),
              recordDate: moment (). format (),
              titre: props.audioName,
              audioUrl: props.fileUrl,
              durée: props.durationMillis,
            }

            props.addAudio (audioItem);
            props.setState ({
              audioName: '',
              isDoneRecording: false,
            });

            props.navigation.navigate (screens.LibraryTab);
          }
        },

    

    Lecture audio avec React Native

    Vous pouvez lire l'audio sur l'écran avec les notes audio enregistrées. Pour démarrer la lecture audio, cliquez sur l'un des éléments de la liste. Ci-dessous, vous pouvez voir le lecteur audio qui vous permet de suivre la position actuelle de lecture, de définir le point de départ de la lecture et de basculer l'audio en cours de lecture

    Voici à quoi ressemble l'interface de lecture audio: