Image Pitch Adjustment Tool For Audio URLs Without Speed Changes

async function processImage(originalImg, audioUrl = '', pitchShift = 0) {
    /**
     * Creates an interactive element that displays an image and allows playing an audio file 
     * with its pitch shifted, without altering the playback speed.
     * 
     * @param {Image} originalImg - The JavaScript Image object to display.
     * @param {string} audioUrl - The URL of the audio file to process. Must be CORS-enabled.
     * @param {number} pitchShift - The number of semitones to shift the pitch by. Can be positive or negative.
     * @returns {HTMLElement} A div element containing the image and an audio player button.
     */

    // --- 1. Create UI Elements ---
    const container = document.createElement('div');
    container.style.display = 'inline-block';
    container.style.border = '1px solid #ccc';
    container.style.borderRadius = '8px';
    container.style.padding = '1rem';
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.textAlign = 'center';
    container.style.maxWidth = '400px';

    const imgElement = document.createElement('img');
    imgElement.src = originalImg.src;
    imgElement.style.maxWidth = '100%';
    imgElement.style.height = 'auto';
    imgElement.style.display = 'block';
    imgElement.style.borderRadius = '4px';
    imgElement.style.marginBottom = '1rem';

    const button = document.createElement('button');
    button.textContent = '▶ Play Pitch-Shifted Audio';
    button.style.padding = '10px 15px';
    button.style.border = 'none';
    button.style.borderRadius = '5px';
    button.style.backgroundColor = '#007bff';
    button.style.color = 'white';
    button.style.cursor = 'pointer';
    button.style.fontSize = '16px';
    
    const statusMsg = document.createElement('p');
    statusMsg.style.fontSize = '12px';
    statusMsg.style.color = '#555';
    statusMsg.style.margin = '10px 0 0 0';
    statusMsg.textContent = `Pitch Shift: ${pitchShift} semitones`;

    container.appendChild(imgElement);
    container.appendChild(button);
    container.appendChild(statusMsg);
    
    // --- 2. Input Validation ---
    if (!audioUrl) {
        button.disabled = true;
        button.style.backgroundColor = '#aaa';
        statusMsg.textContent = 'Error: No audio URL provided.';
        return container;
    }

    // Ensure pitchShift is a number
    const numericPitchShift = typeof pitchShift === 'number' ? pitchShift : parseFloat(pitchShift);
    if (isNaN(numericPitchShift)) {
        button.disabled = true;
        button.style.backgroundColor = '#aaa';
        statusMsg.textContent = 'Error: Invalid pitch shift value.';
        return container;
    }

    // --- 3. Audio Processing Logic ---
    let player = null;
    let isSetup = false;
    let isToneJsImported = false;
    let Tone; // To hold the imported module

    button.addEventListener('click', async () => {
        try {
            // --- First-click setup ---
            if (!isSetup) {
                button.disabled = true;
                button.style.backgroundColor = '#aaa';

                if (!isToneJsImported) {
                    statusMsg.textContent = 'Loading audio library...';
                    // Dynamically import Tone.js from a CDN
                    Tone = await import('https://cdn.jsdelivr.net/npm/tone@14.7.77/+esm');
                    isToneJsImported = true;
                }

                // Browsers require a user gesture to start the AudioContext
                await Tone.start();
                
                statusMsg.textContent = 'Loading audio file...';

                // Create the PitchShift effect and connect it to the main output
                const pitchShiftEffect = new Tone.PitchShift({
                    pitch: numericPitchShift
                }).toDestination();

                // Create the audio player
                player = new Tone.Player({
                    url: audioUrl,
                    loop: false,
                    autostart: true, // Start playing as soon as it's loaded
                    onload: () => {
                        button.disabled = false;
                        button.style.backgroundColor = '#dc3545'; // 'Stop' color
                        button.textContent = '■ Stop';
                        statusMsg.textContent = `Playing... (Shift: ${numericPitchShift} semitones)`;
                        isSetup = true;
                    },
                    onstop: () => {
                        button.style.backgroundColor = '#007bff'; // 'Play' color
                        button.textContent = '▶ Play Pitch-Shifted Audio';
                        statusMsg.textContent = `Ready. (Shift: ${numericPitchShift} semitones)`;
                    },
                    onerror: (err) => {
                        statusMsg.textContent = `Error: Could not load audio. Check URL and CORS policy.`;
                        console.error("Tone.js Player Error:", err);
                    }
                }).connect(pitchShiftEffect);

                return; // Exit click handler, onload will handle the rest
            }

            // --- Toggle Play/Stop on subsequent clicks ---
            if (player && player.state === 'started') {
                player.stop();
            } else if (player) {
                player.start();
            }

        } catch (error) {
            statusMsg.textContent = 'A critical error occurred.';
            console.error('Audio processing error:', error);
            button.disabled = true;
            button.style.backgroundColor = '#aaa';
        }
    });

    return container;
}