main.js

// Variable definitions
const app = document.getElementById('app');
const audioColumn = document.getElementById('audio-column');
const textColumn = document.getElementById('text-column');
const audioControl = document.getElementById('audio');
const transcript = document.getElementById('text');
const submitButton = document.getElementById('submit');
const loader = document.getElementById('loader');
const backButton = document.getElementById('backButton');
const form = document.getElementById('form');
const fileExtention = document.getElementById('fileExtention');
const backButtonLoader = document.getElementById('backButtonLoader');
const transcribe = async (event) => {
    event.preventDefault();
    if (!fileExtention.value) {
        alert('Please specify the file extension first!');
        return false;
    }
    loader.classList.remove('hidden');
    submitButton.disabled = true;
    try {
        let response = await fetch('/transcribe', {
            method: 'POST',
            body: JSON.stringify({
                fileExt: fileExtention.value,
                tranFile: event.target.file.value
            })
        });
        if (response.status === 200) {
            let data = await response.json();
            transcript.textContent = data.text;
            audioControl.src = data.audioUrl;
            audioControl.playsinline = true;
            audioControl.addEventListener("loadeddata", () => {
                audioControl.play();
            });
            submitButton.disabled = false;
            loader.classList.add('hidden');
        } else {
            console.log(response);
            alert('Invalid file!');
        }
    } catch (err) {
        console.log(err);
        alert('An error occurred while uploading the file! Please try again');
    }
};

// Event listeners
form.addEventListener('submit', transcribe);
backButton.addEventListener('click', () => {
    backButtonLoader.classList.remove('hidden');
    setTimeout(() => {
        window.history.back();
    }, 1500);
});