static/js/design.js

let isRecording = false;
let mediaRecorder;
let recordedChunks = [];

// Handles the recording button click event
document.getElementById('recordButton').addEventListener('click', function () {
    if (!isRecording) {
        startRecording();
    } else {
        stopRecording();
    }
});

function startRecording() {
    navigator.mediaDevices.getUserMedia({ audio: true })
        .then(function (stream) {
            mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' });

            mediaRecorder.ondataavailable = function (e) {
                if (e.data.size > 0) {
                    recordedChunks.push(e.data);
                }
            };

            mediaRecorder.start();
            console.log("Recording started");

            // Update button text and style
            document.getElementById('recordButton').textContent = 'Stop';
            document.getElementById('recordButton').classList.add('recording');
            document.getElementById('recordStatus').textContent = 'Recording...';
            document.getElementById('transcribeContainer').style.display = 'none'; // Hide Transcribe button initially
            isRecording = true;
        })
        .catch(function (err) {
            console.error('Error accessing media devices: ', err);
        });
}

function stopRecording() {
    mediaRecorder.stop();
    console.log("Recording stopped");

    mediaRecorder.onstop = function () {
        const blob = new Blob(recordedChunks, { type: 'audio/webm' });
        recordedChunks = [];
        const audioURL = window.URL.createObjectURL(blob);

        console.log(`Blob size: ${blob.size} bytes`); // Debugging statement
        console.log(`Audio URL: ${audioURL}`); // Debugging statement

        // Optionally, add a debug audio player to check if recording is valid
        const debugAudio = document.createElement('audio');
        debugAudio.controls = true;
        debugAudio.src = audioURL;
        document.body.appendChild(debugAudio);

        // Update button text and style
        document.getElementById('recordButton').textContent = 'Start';
        document.getElementById('recordButton').classList.remove('recording');
        document.getElementById('recordStatus').textContent = 'Tap to Record';
        document.getElementById('transcribeContainer').style.display = 'block'; // Show Transcribe button

        // Set up the Transcribe button click event
        document.getElementById('transcribeButton').addEventListener('click', function () {
            transcribeAudio(blob);
        });

        isRecording = false;
    };
}

function transcribeAudio(blob) {
    const formData = new FormData();
    formData.append('audio', blob, 'audio.webm');

    // Log FormData entries for debugging
    for (const [key, value] of formData.entries()) {
        console.log(`${key}: ${value}`);
    }

    fetch('https://jikoni-semabox.hf.space/transcribe', { 
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        console.log(data); // Debugging statement
        document.getElementById('output').textContent = data.transcription || 'No transcription available';
    })
    .catch(error => {
        console.error('Error during transcription:', error);
    });
}