Image To Audio Pitch Converter

/**
 * Converts an image into an audio representation by scanning it and mapping pixel brightness to sound frequency.
 * This function returns an HTML element with a "Play" button to trigger the audio playback.
 * The audio is generated using the Web Audio API.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {number} [scanDuration=5] The total duration in seconds for the audio playback of the entire image.
 * @param {number} [minFreq=200] The minimum audio frequency (pitch) in Hz, corresponding to the darkest pixels.
 * @param {number} [maxFreq=1200] The maximum audio frequency (pitch) in Hz, corresponding to the brightest pixels.
 * @param {string} [waveform='sine'] The shape of the audio wave. Can be 'sine', 'square', 'sawtooth', or 'triangle'.
 * @returns {HTMLElement} A div element containing a button to play the generated sound.
 */
function processImage(originalImg, scanDuration = 5, minFreq = 200, maxFreq = 1200, waveform = 'sine') {
    // --- Create UI elements to return ---
    const container = document.createElement('div');
    container.style.textAlign = 'center';
    container.style.fontFamily = 'sans-serif';

    const button = document.createElement('button');
    button.textContent = 'Play Image Audio';
    button.style.padding = '10px 20px';
    button.style.fontSize = '16px';
    button.style.cursor = 'pointer';
    button.style.border = '1px solid #ccc';
    button.style.borderRadius = '5px';

    const info = document.createElement('p');
    info.textContent = `Duration: ${scanDuration}s, Freq Range: ${minFreq}-${maxFreq}Hz, Waveform: ${waveform}`;
    info.style.marginTop = '10px';
    info.style.fontFamily = 'monospace';
    info.style.fontSize = '12px';
    info.style.color = '#555';

    container.appendChild(button);
    container.appendChild(info);

    // --- Prepare image data using a canvas ---
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    ctx.drawImage(originalImg, 0, 0);
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    let audioContext = null; // To be initialized on user interaction

    button.onclick = () => {
        if (button.disabled) return;
        button.disabled = true;
        button.textContent = 'Playing...';

        // Create or resume AudioContext on user gesture, as required by modern browsers.
        if (!audioContext || audioContext.state === 'closed') {
            audioContext = new(window.AudioContext || window.webkitAudioContext)();
        } else if (audioContext.state === 'suspended') {
            audioContext.resume();
        }

        const oscillator = audioContext.createOscillator();
        const gainNode = audioContext.createGainNode();

        oscillator.connect(gainNode);
        gainNode.connect(audioContext.destination);

        // Validate waveform parameter
        const validWaveforms = ['sine', 'square', 'sawtooth', 'triangle'];
        oscillator.type = validWaveforms.includes(waveform) ? waveform : 'sine';

        // Set a gentle volume to avoid clipping
        gainNode.gain.setValueAtTime(0.5, audioContext.currentTime);

        const durationPerColumn = scanDuration / canvas.width;
        const startTime = audioContext.currentTime;

        // Iterate through each vertical column of the image
        for (let x = 0; x < canvas.width; x++) {
            let columnTotalLuminance = 0;

            // Calculate the average luminance for the current column
            for (let y = 0; y < canvas.height; y++) {
                const i = (y * canvas.width + x) * 4; // Index of the red component
                const r = data[i];
                const g = data[i + 1];
                const b = data[i + 2];
                // Standard luminance calculation (perceived brightness)
                const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
                columnTotalLuminance += luminance;
            }

            const averageLuminance = columnTotalLuminance / canvas.height;

            // Map luminance (0-255) to the specified frequency range.
            // Dark pixels (low luminance) result in low frequency.
            // Bright pixels (high luminance) result in high frequency.
            const frequency = minFreq + (averageLuminance / 255) * (maxFreq - minFreq);

            // Schedule a precise frequency change at the corresponding time
            const time = startTime + x * durationPerColumn;
            oscillator.frequency.setValueAtTime(frequency, time);
        }

        // Start the oscillator and schedule it to stop after the full duration
        oscillator.start(startTime);
        oscillator.stop(startTime + scanDuration);

        // Reset the button after playback finishes
        oscillator.onended = () => {
            button.disabled = false;
            button.textContent = 'Play Image Audio';
            // Disconnect nodes to allow for garbage collection
            gainNode.disconnect();
            oscillator.disconnect();
        };
    };

    return container;
}