script.js

function chooseFile() {
    const input = document.createElement('input');
    input.type = 'file';
    
    input.onchange = function (e) {
        const file = e.target.files[0];
        loadToPlayer(file)
    }
    input.click();
}


function processLink() {
    const link = document.getElementById("linkInput").value;
    const player = document.getElementById('player');

    player.src = link;
    player.load();
}


function setSongInfo(fileContent) {
    const mp3Tags = new MP3Tag(fileContent);
    mp3Tags.read()
    const { v2: {APIC, TIT2 : title, TPE1 : artist}} = mp3Tags.tags;
    const coverBytes = APIC[0].data;
    const coverURL = "data:image/png;base64," + btoa(String.fromCharCode.apply(null, new Uint8Array(coverBytes)));

    console.log(title,artist)
    document.getElementById("song").textContent = title || "Unknown Title";
    document.getElementById("artist").textContent = artist || "Unknown Artist";
    document.getElementById("cover").src = coverURL || "https://placehold.co/200";
}


function loadToPlayer(file) {
    const player = document.getElementById('player');

    const reader = new FileReader();

    reader.onload = (e) => {
        const content = e.target.result;
        setSongInfo(content);
    }


    reader.readAsArrayBuffer(file)

    player.src = URL.createObjectURL(file);
    player.load();
}


function initDropzone() {
    const dropzone = document.getElementById('dropzone');
    dropzone.addEventListener('dragover', (e) => {
        e.preventDefault();
        e.stopPropagation();
    })

    dropzone.addEventListener('drop', (e) => {
        e.preventDefault();
        e.stopPropagation();

        const file = e.dataTransfer.files[0];
        loadToPlayer(file);
    })
}


window.onload = () => {
    initDropzone();
}