README.md

metadata

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 :

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.