Create script.js

static/script.js

@@ -0,0 +1,92 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const dropArea = document.getElementById('drop-area');
+    const fileInput = document.getElementById('fileInput');
+    const options = document.getElementById('options');
+    const multiplicationFactor = document.getElementById('multiplicationFactor');
+    const factorValue = document.getElementById('factorValue');
+    const processButton = document.getElementById('processButton');
+    const result = document.getElementById('result');
+    const audioPlayer = document.getElementById('audioPlayer');
+    const downloadLink = document.getElementById('downloadLink');
+
+    let isDecrypting = false;
+
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+        dropArea.addEventListener(eventName, preventDefaults, false);
+    });
+
+    function preventDefaults(e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+
+    ['dragenter', 'dragover'].forEach(eventName => {
+        dropArea.addEventListener(eventName, highlight, false);
+    });
+
+    ['dragleave', 'drop'].forEach(eventName => {
+        dropArea.addEventListener(eventName, unhighlight, false);
+    });
+
+    function highlight() {
+        dropArea.classList.add('highlight');
+    }
+
+    function unhighlight() {
+        dropArea.classList.remove('highlight');
+    }
+
+    dropArea.addEventListener('drop', handleDrop, false);
+
+    function handleDrop(e) {
+        const dt = e.dataTransfer;
+        const files = dt.files;
+        handleFiles(files);
+    }
+
+    fileInput.addEventListener('change', function() {
+        handleFiles(this.files);
+    });
+
+    function handleFiles(files) {
+        if (files.length > 0) {
+            const file = files[0];
+            isDecrypting = file.type === 'audio/mpeg';
+            options.style.display = 'block';
+            processButton.textContent = isDecrypting ? 'Deconvert' : 'Convert';
+        }
+    }
+
+    multiplicationFactor.addEventListener('input', function() {
+        factorValue.textContent = this.value;
+    });
+
+    processButton.addEventListener('click', function() {
+        const file = fileInput.files[0];
+        if (!file) {
+            alert('Please select a file first.');
+            return;
+        }
+
+        const formData = new FormData();
+        formData.append('file', file);
+        formData.append('factor', multiplicationFactor.value);
+
+        fetch('/process', {
+            method: 'POST',
+            body: formData
+        })
+        .then(response => response.blob())
+        .then(blob => {
+            const url = URL.createObjectURL(blob);
+            result.style.display = 'block';
+            audioPlayer.src = url;
+            downloadLink.href = url;
+            downloadLink.download = isDecrypting ? 'deconverted_file.wav' : 'converted_file.mp3';
+        })
+        .catch(error => {
+            console.error('Error:', error);
+            alert('An error occurred while processing the file.');
+        });
+    });
+});