---
title: Captation Audio
emoji: 🏢
colorFrom: yellow
colorTo: gray
sdk: static
pinned: false
---

Voici un aperçu de l'enregistrement et du traitement audio sur le web, basé sur le fichier HTML fourni.

---

### 🎙️ Fonctionnement de l'Enregistrement Audio

Le cœur de ce système d'enregistrement audio réside dans l'utilisation de l'API **MediaDevices**.

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.

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.

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é.

---

### ➡️ Envoi de l'Audio à une API

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.

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.

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.

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.

---

### 📁 Upload de Fichiers Audio Existants

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.

### 💡 Autres Méthodes de Traitement Audio

Bien que ce code utilise l'API `MediaDevices` et `MediaRecorder`, il existe d'autres outils pour manipuler l'audio sur le web :

* **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.
* **É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.


### 🛠️ Intégration de l'API Whisper Côté Client

Pour intégrer l'API OpenAI Whisper directement dans une page web, vous devez envoyer une requête **`POST`** en utilisant le format `multipart/form-data`. Le code HTML fourni est déjà configuré pour cela. Voici une note technique expliquant les modifications à apporter au code JavaScript pour réaliser l'appel.

-----

### 📝 Note Technique : Appel direct à l'API Whisper

#### 1\. Préparation de la Requête

L'API Whisper requiert deux éléments principaux dans le corps de la requête `multipart/form-data`:

  * `file` : Le fichier audio à transcrire.
  * `model` : Le nom du modèle à utiliser, qui doit être `"whisper-1"`.

De plus, une **clé API** est nécessaire pour l'authentification. Elle doit être incluse dans l'en-tête de la requête sous la forme `Authorization: Bearer VOTRE_CLÉ_API`.

#### 2\. Modification du Code JavaScript

Pour adapter la fonction `sendAudioToApi` afin qu'elle envoie la requête directement à l'API Whisper, suivez ces étapes :

a. **Mettez à jour l'URL de l'API.**
L'endpoint de l'API Whisper est `https://api.openai.com/v1/audio/transcriptions` (pour la transcription) ou `https://api.openai.com/v1/audio/translations` (pour la traduction). Assurez-vous que l'URL dans la variable `endpoint` est correcte.

b. **Construisez le corps de la requête.**
Ajoutez le modèle `"whisper-1"` et le fichier audio (`blob`) au `FormData` que la fonction prépare déjà.

c. **Ajoutez les en-têtes d'authentification.**
L'en-tête `Content-Type` sera automatiquement géré par le navigateur pour le `multipart/form-data`, mais vous devez explicitement ajouter l'en-tête `Authorization`.

Voici la fonction `sendAudioToApi` modifiée :

```javascript
async function sendAudioToApi(blob) {
  // L'endpoint pour la traduction est https://api.openai.com/v1/audio/translations
  const endpoint = "https://api.openai.com/v1/audio/translations"; 
  const apiKey = "VOTRE_CLÉ_API_OPENAI"; // Mettez votre clé ici
  if (!apiKey) {
    setStatus("Clé API manquante. Impossible d'envoyer la requête.");
    return;
  }
  
  setStatus("Envoi de l'audio à l'API OpenAI...");

  const form = new FormData();
  const extension = blob.type.includes('wav') ? 'wav' : (blob.type.includes('mpeg') ? 'mp3' : 'webm');
  const filename = `recording-${Date.now()}.${extension}`;
  
  form.append('file', blob, filename);
  form.append('model', 'whisper-1');

  try {
    const response = await fetch(endpoint, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${apiKey}`,
      },
      body: form,
    });

    if (!response.ok) {
      const errorData = await response.json();
      setStatus(`Échec de l'envoi : ${response.status} - ${errorData.error.message}`);
      throw new Error('Échec de l\'envoi');
    }

    const result = await response.json();
    setStatus('Envoi réussi');
    
    if (result && result.text) {
      displayTranscription(result.text);
    } else {
      log('Aucune transcription trouvée dans la réponse de l\'API');
    }
    
    return result;
  } catch (err) {
    setStatus('Erreur lors de l\'envoi à l\'API');
    console.error(err);
    throw err;
  }
}
```

**Remarque** : Si vous souhaitez faire une traduction au lieu d'une transcription, utilisez l'endpoint `https://api.openai.com/v1/audio/translations`. La structure de la requête reste la même. L'API retourne un objet JSON avec la clé `"text"` contenant la transcription ou la traduction.