s

index.html

@@ -66,21 +66,30 @@
                 this.recordButton.addEventListener('click', () => this.toggleRecording());
                 
                 // Replace with your Eleven Labs API key
-                this.ELEVEN_LABS_API_KEY = 'sk_4202af01226d4d527984c445a2e729d21ec28c5cfb309df7';
+                this.ELEVEN_LABS_API_KEY = 'sk_d31f32025dda541dcd4f0aad95d3c7d1b31d36db7116dc1f';
             }
             
             async setupMediaRecorder() {
                 try {
-                    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-                    this.mediaRecorder = new MediaRecorder(stream);
+                    const stream = await navigator.mediaDevices.getUserMedia({ 
+                        audio: {
+                            sampleRate: 16000,
+                            channelCount: 1
+                        }
+                    });
+                    
+                    this.mediaRecorder = new MediaRecorder(stream, {
+                        mimeType: 'audio/webm',
+                        audioBitsPerSecond: 128000
+                    });
                     
                     this.mediaRecorder.ondataavailable = (event) => {
                         this.audioChunks.push(event.data);
                     };
                     
                     this.mediaRecorder.onstop = async () => {
-                        const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
-                        await this.sendToElevenLabs(audioBlob);
+                        const audioBlob = new Blob(this.audioChunks, { type: 'audio/webm' });
+                        await this.convertAndSend(audioBlob);
                         this.audioChunks = [];
                     };
                     
@@ -117,22 +126,85 @@
                 this.recordButton.classList.remove('recording');
                 this.statusDiv.textContent = 'Processing audio...';
             }
+
+            async convertAndSend(audioBlob) {
+                try {
+                    // Convert to audio buffer
+                    const arrayBuffer = await audioBlob.arrayBuffer();
+                    const audioContext = new AudioContext();
+                    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+                    
+                    // Create WAV file
+                    const wavBuffer = this.audioBufferToWav(audioBuffer);
+                    const wavBlob = new Blob([wavBuffer], { type: 'audio/wav' });
+                    
+                    await this.sendToElevenLabs(wavBlob);
+                } catch (error) {
+                    console.error('Error converting audio:', error);
+                    this.statusDiv.textContent = 'Error converting audio. Please try again.';
+                }
+            }
+            
+            audioBufferToWav(audioBuffer) {
+                const numberOfChannels = 1; // Mono
+                const sampleRate = 16000;
+                const format = 1; // PCM
+                const bitDepth = 16;
+                
+                const length = audioBuffer.length * numberOfChannels * (bitDepth / 8);
+                const buffer = new ArrayBuffer(44 + length);
+                const view = new DataView(buffer);
+                
+                // Write WAV header
+                const writeString = (view, offset, string) => {
+                    for (let i = 0; i < string.length; i++) {
+                        view.setUint8(offset + i, string.charCodeAt(i));
+                    }
+                };
+                
+                writeString(view, 0, 'RIFF');
+                view.setUint32(4, 36 + length, true);
+                writeString(view, 8, 'WAVE');
+                writeString(view, 12, 'fmt ');
+                view.setUint32(16, 16, true);
+                view.setUint16(20, format, true);
+                view.setUint16(22, numberOfChannels, true);
+                view.setUint32(24, sampleRate, true);
+                view.setUint32(28, sampleRate * numberOfChannels * (bitDepth / 8), true);
+                view.setUint16(32, numberOfChannels * (bitDepth / 8), true);
+                view.setUint16(34, bitDepth, true);
+                writeString(view, 36, 'data');
+                view.setUint32(40, length, true);
+                
+                // Write audio data
+                const channelData = audioBuffer.getChannelData(0);
+                let offset = 44;
+                for (let i = 0; i < channelData.length; i++) {
+                    const sample = Math.max(-1, Math.min(1, channelData[i]));
+                    view.setInt16(offset, sample < 0 ? sample * 0x8000 : sample * 0x7FFF, true);
+                    offset += 2;
+                }
+                
+                return buffer;
+            }
             
-            async sendToElevenLabs(audioBlob) {
+            async sendToElevenLabs(wavBlob) {
                 try {
                     const formData = new FormData();
-                    formData.append('audio', audioBlob);
+                    formData.append('audio', wavBlob, 'recording.wav');
                     
                     const response = await fetch('https://api.elevenlabs.io/v1/speech-to-text', {
                         method: 'POST',
                         headers: {
                             'xi-api-key': this.ELEVEN_LABS_API_KEY,
+                            'Accept': 'application/json'
                         },
                         body: formData
                     });
                     
                     if (!response.ok) {
-                        throw new Error(`HTTP error! status: ${response.status}`);
+                        const errorText = await response.text();
+                        throw new Error(`HTTP error! status: ${response.status}, ${errorText}`);
                     }
                     
                     const data = await response.json();
@@ -141,7 +213,7 @@
                     
                 } catch (error) {
                     console.error('Error sending to Eleven Labs:', error);
-                    this.statusDiv.textContent = 'Error processing audio. Please try again.';
+                    this.statusDiv.textContent = 'Error sending to Eleven Labs API. Please check your API key and try again.';
                 }
             }
         }