static/js/script.js

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

document.getElementById('recordButton').addEventListener('click', async function () {
    if (!isRecording) {
        startRecording();
    } else {
        stopRecording();
    }
});

function startRecording() {
    navigator.mediaDevices.getUserMedia({ audio: true })
        .then(function (stream) {
            mediaRecorder = new MediaRecorder(stream);
            mediaRecorder.start();

            mediaRecorder.ondataavailable = function (e) {
                recordedChunks.push(e.data);
            };

            document.getElementById('recordButton').textContent = 'Stop';
            document.getElementById('recordStatus').textContent = 'Recording...';
            isRecording = true;
        })
        .catch(function (err) {
            console.log('The following error occurred: ' + err);
        });
}

function stopRecording() {
    mediaRecorder.stop();

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

        document.getElementById('recordButton').textContent = 'Start';
        document.getElementById('recordStatus').textContent = 'Tap to Record';
        document.getElementById('transcribeContainer').style.display = 'block';

        document.getElementById('transcribeButton').addEventListener('click', function () {
            transcribeAudio(blob);
        });

        isRecording = false;
    };
}

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

    fetch('/transcribe', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('output').textContent = data.transcription;
    })
    .catch(error => {
        console.error('Error:', error);
    });
}