static/script.js

let mediaRecorder;
let audioChunks = [];
let originalAudioBlob = null;
let userAudioBlob = null;

document.getElementById('originalAudio').addEventListener('change', function (e) {
    const file = e.target.files[0];
    const audioPlayer = document.getElementById('originalAudioPlayer');
    const fileURL = URL.createObjectURL(file);
    audioPlayer.src = fileURL;
    audioPlayer.play();
    originalAudioBlob = file;
});

document.getElementById('userAudio').addEventListener('change', function (e) {
    const file = e.target.files[0];
    const audioPlayer = document.getElementById('userAudioPlayer');
    const fileURL = URL.createObjectURL(file);
    audioPlayer.src = fileURL;
    audioPlayer.play();
    userAudioBlob = file;
});

function startRecording(type) {
    audioChunks = [];

    navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
        mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' }); // Default format is webm
        mediaRecorder.start();

        mediaRecorder.addEventListener("dataavailable", event => {
            audioChunks.push(event.data);
        });

        mediaRecorder.addEventListener("stop", () => {
            const audioBlob = new Blob(audioChunks, { type: 'audio/wav' }); // Save as .wav
            const audioURL = URL.createObjectURL(audioBlob);

            if (type === 'original') {
                document.getElementById('originalAudioPlayer').src = audioURL;
                originalAudioBlob = audioBlob;
            } else if (type === 'user') {
                document.getElementById('userAudioPlayer').src = audioURL;
                userAudioBlob = audioBlob;
            }
        });
    });

    // Add recording animation and disable the start button
    if (type === 'original') {
        document.getElementById('recordOriginalAudio').classList.add('recording-active');
        document.getElementById('recordOriginalAudio').disabled = true;
        document.getElementById('stopOriginalAudio').disabled = false;
    } else {
        document.getElementById('recordUserAudio').classList.add('recording-active');
        document.getElementById('recordUserAudio').disabled = true;
        document.getElementById('stopUserAudio').disabled = false;
    }
}

function stopRecording(type) {
    mediaRecorder.stop();

    // Remove recording animation and enable the start button
    if (type === 'original') {
        document.getElementById('recordOriginalAudio').classList.remove('recording-active');
        document.getElementById('recordOriginalAudio').disabled = false;
        document.getElementById('stopOriginalAudio').disabled = true;
    } else {
        document.getElementById('recordUserAudio').classList.remove('recording-active');
        document.getElementById('recordUserAudio').disabled = false;
        document.getElementById('stopUserAudio').disabled = true;
    }
}

document.getElementById('performTesting').addEventListener('click', function () {
    if (originalAudioBlob && userAudioBlob) {
        const formData = new FormData();
        formData.append('original_audio', originalAudioBlob, 'original_audio.wav');
        formData.append('user_audio', userAudioBlob, 'user_audio.wav');

        // Show loader
        document.getElementById('loader').style.display = 'block';
        document.getElementById('results').style.display = 'none';

        fetch('/transcribe', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            // Hide loader and show results
            document.getElementById('loader').style.display = 'none';
            document.getElementById('results').style.display = 'block';

            document.getElementById('transcriptionOriginal').innerText = `Original Transcription: ${data.transcription_original}`;
            document.getElementById('transcriptionUser').innerText = `User Transcription: ${data.transcription_user}`;
            document.getElementById('similarityScore').innerText = `Similarity Score: ${data.similarity_score.toFixed(2)}`;
        });
    } else {
        alert('Please provide both original and user audio files.');
    }
});