Image Sound Downloader

async function processImage(originalImg) {
    /**
     * A self-contained, robust script loader for the jsQR library.
     * It ensures the script is loaded only once, even if this function is called multiple times.
     * @returns {Promise<void>} A promise that resolves when the script is loaded.
     */
    const loadJsQR = (() => {
        const SCRIPT_URL = 'https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.js';
        let promise = null;
        return () => {
            if (window.jsQR) {
                return Promise.resolve(); // Already available globally
            }
            if (promise) {
                return promise; // Script is already being loaded
            }
            // Create a new promise for loading the script
            promise = new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = SCRIPT_URL;
                script.onload = resolve;
                script.onerror = () => {
                    promise = null; // Allow retrying on failure
                    reject(new Error('Could not load the QR code scanner library. Please check your network connection.'));
                };
                script.async = true;
                document.head.appendChild(script);
            });
            return promise;
        };
    })();

    try {
        await loadJsQR();
    } catch (error) {
        console.error(error);
        const errorElement = document.createElement('div');
        errorElement.textContent = error.message;
        errorElement.style.color = 'red';
        errorElement.style.padding = '1em';
        errorElement.style.border = '1px solid #d9534f';
        errorElement.style.backgroundColor = '#f2dede';
        errorElement.style.borderRadius = '4px';
        return errorElement;
    }

    const canvas = document.createElement('canvas');
    // Using { willReadFrequently: true } can optimize repeated getImageData calls
    const ctx = canvas.getContext('2d', { willReadFrequently: true });
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

    // Scan the image data for a QR code
    const code = window.jsQR(imageData.data, imageData.width, imageData.height);

    if (code && code.data) {
        try {
            // Check if the decoded data is a valid URL
            const url = new URL(code.data);

            const container = document.createElement('div');
            const message = document.createElement('p');

            const urlString = url.href;
            // Truncate long URLs for better display
            const displayUrl = urlString.length > 70 ? `${urlString.substring(0, 67)}...` : urlString;

            message.innerHTML = `✅ QR Code detected! Found a link that may be an audio source.<br><br><b>URL:</b> <a href="${urlString}" target="_blank" rel="noopener noreferrer">${displayUrl}</a>`;
            container.appendChild(message);

            const audioElement = document.createElement('audio');
            audioElement.controls = true;
            audioElement.src = urlString;
            audioElement.style.width = '100%';
            audioElement.style.marginTop = '10px';
            container.appendChild(audioElement);

            return container;

        } catch (e) {
            // Decoded data is not a URL, so display it as text
            const resultContainer = document.createElement('div');
            const infoElement = document.createElement('p');
            infoElement.innerHTML = `ℹ️ QR Code found, but its content is plain text, not a URL.`;
            resultContainer.appendChild(infoElement);

            const contentHeader = document.createElement('strong');
            contentHeader.textContent = 'Decoded Text:';
            resultContainer.appendChild(contentHeader);

            // Use <pre> for better formatting of multiline text
            const contentDiv = document.createElement('pre');
            contentDiv.textContent = code.data;
            contentDiv.style.padding = '10px';
            contentDiv.style.border = '1px solid #ccc';
            contentDiv.style.backgroundColor = '#f9f9f9';
            contentDiv.style.borderRadius = '4px';
            contentDiv.style.marginTop = '5px';
            contentDiv.style.maxHeight = '150px';
            contentDiv.style.overflowY = 'auto';
            contentDiv.style.whiteSpace = 'pre-wrap';
            contentDiv.style.wordBreak = 'break-all';
            resultContainer.appendChild(contentDiv);

            return resultContainer;
        }
    } else {
        const noQrElement = document.createElement('p');
        noQrElement.textContent = '❌ No QR code could be detected in the image.';
        return noQrElement;
    }
}