14. Audio en la Web: Transcripción con Whisper API y Text-to-Speech (TTS)

/**
 * voice-chat-recorder.js - Grabador de notas de voz web para transcripción
 */
class VoiceAssistantRecorder {
  constructor() {
    this.mediaRecorder = null;
    this.audioChunks = [];
  }

  async startRecording() {
    this.audioChunks = [];
    // Solicitamos acceso al micrófono del dispositivo
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    
    this.mediaRecorder = new MediaRecorder(stream, { mimeType: "audio/webm" });

    this.mediaRecorder.ondataavailable = (event) => {
      if (event.data.size > 0) {
        this.audioChunks.push(event.data);
      }
    };

    this.mediaRecorder.start();
    console.log("Grabando audio...");
  }

  stopAndTranscribe(onSuccess, onError) {
    if (!this.mediaRecorder) return;

    this.mediaRecorder.onstop = async () => {
      try {
        const audioBlob = new Blob(this.audioChunks, { type: "audio/webm" });
        const formData = new FormData();
        formData.append("audio_file", audioBlob, "grabacion.webm");

        // Enviamos al backend proxy para evitar exponer la API Key
        const res = await fetch("/api/transcribe.php", {
          method: "POST",
          body: formData
        });

        if (!res.ok) throw new Error("Fallo en la transcripción");

        const data = await res.json();
        onSuccess(data.transcription); // Texto transcrito por Whisper
      } catch (err) {
        onError(err);
      }
    };

    this.mediaRecorder.stop();
    // Detenemos los tracks de audio para liberar el micrófono en el navegador
    this.mediaRecorder.stream.getTracks().forEach((track) => track.stop());
  }
}