Spaces:
Running
Running
Update README.md
Browse files
README.md
CHANGED
|
@@ -7,4 +7,41 @@ sdk: static
|
|
| 7 |
pinned: false
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 7 |
pinned: false
|
| 8 |
---
|
| 9 |
|
| 10 |
+
Voici un aperçu de l'enregistrement et du traitement audio sur le web, basé sur le fichier HTML fourni.
|
| 11 |
+
|
| 12 |
+
---
|
| 13 |
+
|
| 14 |
+
### 🎙️ Fonctionnement de l'Enregistrement Audio
|
| 15 |
+
|
| 16 |
+
Le cœur de ce système d'enregistrement audio réside dans l'utilisation de l'API **MediaDevices**.
|
| 17 |
+
|
| 18 |
+
1. **Accès au Microphone** : L'utilisateur clique sur le bouton "Démarrer", ce qui déclenche l'appel à `navigator.mediaDevices.getUserMedia({ audio: true })`. Cette fonction demande l'autorisation d'accéder au microphone de l'utilisateur. Si l'accès est accordé, elle crée un flux audio (un "stream") que l'on peut manipuler.
|
| 19 |
+
|
| 20 |
+
2. **L'Enregistrement (MediaRecorder)** : Une fois le flux audio capturé, un objet `MediaRecorder` est instancié. Cet objet est spécialisé dans l'enregistrement de flux multimédias. Il collecte les données audio par petites portions (des "chunks") et les stocke dans un tableau. La fonction `initMediaRecorder` dans le code configure ce processus, en s'assurant que les données sont collectées lorsque l'événement `dataavailable` se déclenche.
|
| 21 |
+
|
| 22 |
+
3. **Arrêt et Finalisation** : Lorsque l'utilisateur appuie sur "Stopper", la méthode `mediaRecorder.stop()` est appelée. Le `MediaRecorder` arrête alors de collecter les données, et le code combine tous les "chunks" enregistrés pour former un seul fichier audio compressé, appelé **Blob**. Ce Blob est ensuite prêt à être utilisé.
|
| 23 |
+
|
| 24 |
+
---
|
| 25 |
+
|
| 26 |
+
### ➡️ Envoi de l'Audio à une API
|
| 27 |
+
|
| 28 |
+
L'objectif de l'application est d'envoyer l'audio enregistré ou un fichier audio existant à un service externe, généralement pour une tâche comme la transcription.
|
| 29 |
+
|
| 30 |
+
1. **Préparation de l'Envoi** : Le fichier audio (sous forme de **Blob**) est inséré dans un objet `FormData`. Le `FormData` est un format standard pour construire des requêtes HTTP afin d'envoyer des fichiers. Dans ce cas, le fichier est nommé dynamiquement avec un horodatage pour s'assurer qu'il est unique.
|
| 31 |
+
|
| 32 |
+
2. **La Requête HTTP** : L'objet `FormData` est ensuite envoyé à l'URL de l'API cible via une requête `fetch()` de type `POST`. Le navigateur s'occupe de définir le bon en-tête (`Content-Type: multipart/form-data`) pour le transfert du fichier.
|
| 33 |
+
|
| 34 |
+
3. **Traitement de la Réponse** : Après l'envoi, l'application attend une réponse du serveur. Si la requête est réussie, le code lit la réponse comme un objet JSON. Il recherche ensuite la transcription dans ce JSON, généralement sous une clé comme `"text"`, et l'affiche à l'utilisateur. Si l'API renvoie un statut d'erreur, l'application affiche un message d'échec.
|
| 35 |
+
|
| 36 |
+
---
|
| 37 |
+
|
| 38 |
+
### 📁 Upload de Fichiers Audio Existants
|
| 39 |
+
|
| 40 |
+
Le code ne se limite pas à l'enregistrement en direct ; il permet aussi de téléverser un fichier audio depuis l'ordinateur de l'utilisateur. Le processus est similaire : l'utilisateur sélectionne un fichier, et au lieu de créer un Blob à partir de l'enregistrement, l'application utilise directement le fichier sélectionné comme entrée pour la fonction d'envoi à l'API.
|
| 41 |
+
|
| 42 |
+
### 💡 Autres Méthodes de Traitement Audio
|
| 43 |
+
|
| 44 |
+
Bien que ce code utilise l'API `MediaDevices` et `MediaRecorder`, il existe d'autres outils pour manipuler l'audio sur le web :
|
| 45 |
+
|
| 46 |
+
* **API Web Audio** : Cette API est beaucoup plus avancée et offre un contrôle très granulaire sur le son. Elle est utile pour des tâches telles que la synthèse sonore, l'ajout d'effets (comme la réverbération), et la visualisation des ondes sonores.
|
| 47 |
+
* **Élément `<audio>`** : Le plus simple de tous, cet élément HTML sert uniquement à la lecture de fichiers audio. Il est parfait pour une utilisation basique comme la lecture de l'enregistrement après l'arrêt, comme c'est le cas dans le code fourni.
|