app/public/app.js

const recordButton = document.getElementById('record');
const status = document.getElementById('status');
const transcriptionElement = document.getElementById('transcription');
const audioElement = document.getElementById('audio');
const translationElement = document.getElementById('translation');

let mediaRecorder;
let audioChunks = [];
let transcript = '';
let sentenceIndex = 0;

const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.continuous = true;
recognition.interimResults = true;

recognition.onresult = (event) => {
    let interimTranscript = '';
    for (let i = event.resultIndex; i < event.results.length; ++i) {
        if (event.results[i].isFinal) {
            transcript += event.results[i][0].transcript + ' ';
            saveAudioAndTranscription(event.results[i][0].transcript, sentenceIndex++);
        } else {
            interimTranscript += event.results[i][0].transcript;
        }
    }
    transcriptionElement.innerHTML = transcript + '<i style="color:red;">' + interimTranscript + '</i>';
};

recognition.onerror = (event) => {
    console.error(event.error);
};

recordButton.onmousedown = async () => {
    status.textContent = "Recording...";
    transcript = '';
    sentenceIndex = 0;

    // Start speech recognition
    recognition.start();

    // Start audio recording
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' });
    mediaRecorder.start();

    mediaRecorder.ondataavailable = (event) => {
        audioChunks.push(event.data);
    };
};

recordButton.onmouseup = () => {
    status.textContent = "Recording stopped";

    // Stop speech recognition and audio recording
    recognition.stop();
    mediaRecorder.stop();

    // Process the recorded audio
    saveAudioAndTranscription(transcript, sentenceIndex);
};

async function saveAudioAndTranscription(sentence, index) {
    mediaRecorder.stop();
    mediaRecorder.onstop = async () => {
        const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
        const arrayBuffer = await audioBlob.arrayBuffer();
        const audioBuffer = new Uint8Array(arrayBuffer);

        const formData = new FormData();
        formData.append('audio', new Blob([audioBuffer], { type: 'application/octet-stream' }));
        formData.append('transcript', sentence);
        formData.append('sampleRate', mediaRecorder.stream.getAudioTracks()[0].getSettings().sampleRate);
        formData.append('numberOfChannels', 1);  // Assuming mono audio

        try {
            const response = await fetch('/save-audio', {
                method: 'POST',
                body: formData
            });

            if (response.ok) {
                const result = await response.json();
                console.log(`Saved sentence ${index}`);
                
                // Show translation and play audio
                translationElement.textContent = result.translation;
                audioElement.src = `download-audio?file_path=${result.audio_path}`;
                audioElement.load(); // Ensure the audio element loads the new source
                audioElement.play().catch(error => {
                    console.error('Error playing audio:', error);
                });
            } else {
                console.error('Failed to save the file.');
            }
        } catch (error) {
            console.error('Error saving audio and transcription:', error);
        }

        audioChunks = [];
        mediaRecorder.start();
    };
}