Reports

async function run() {
    const mm = await import('https://cdn.jsdelivr.net/npm/[email protected]/+esm');

    const fileInput = document.getElementById('file');
    const output = document.getElementById('output');
    const title = document.getElementById('title');

    fileInput.addEventListener('change', async (event) => {
        const file = event.target.files[0];
        output.innerHTML = ''; // Clear previous output

        if (file) {
            try {
                // Parse metadata using music-metadata
                const { common } = await mm.parseBlob(file);

                title.textContent = `${common.title} has ${common.picture ? common.picture.length : 0} embedded images:`;

                // Extract and display album art
                if (common.picture && common.picture.length > 0) {
                    common.picture.forEach((picture, index) => {
                        const base64String = btoa(
                            String.fromCharCode(...new Uint8Array(picture.data))
                        );
                        const imgElement = document.createElement('img');
                        imgElement.src = `data:${picture.format};base64,${base64String}`;
                        imgElement.alt = `Picture ${index + 1}`;
                        imgElement.style.maxWidth = '200px';
                        imgElement.style.margin = '10px';
                        output.appendChild(imgElement);
                    });
                } else {
                    output.textContent = 'No album art found';
                }
            } catch (err) {
                output.textContent = 'Error parsing metadata: ' + err.message;
            }
        } else {
            output.textContent = 'No file selected';
        }
    });
}

run();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Extract Album Art with music-metadata</title>
</head>
<body>
    <h3>Select an audio file with embedded album art</h3>
    <input style="cursor: pointer;" type="file" id="file" accept="audio/*" />
    <h3 id="title"></h3>
    <p id="output"></p>
</body>
</html>

Hi, how to transform this code and use it with a direct mp3 filename? (no input requested) Thanks

79454823