Image Audio Effects Voice Changer

async function processImage(originalImg, audioUrl = 'https://cdn.freesound.org/previews/612/612089_11861999-lq.mp3', effectType = 'imageModulation', effectParam1 = 'gain', effectParam2 = 1.0) {
    /**
     * Applies audio effects to a sound file, with some effects controlled by an input image.
     * The function processes the audio offline and returns an HTML element with an audio player and a download link.
     *
     * @param {Image} originalImg - The input image object to use for modulation effects.
     * @param {string} audioUrl - The URL of the audio file to process. Must be CORS-accessible.
     * @param {string} effectType - The type of effect to apply. Options: 'imageModulation', 'pitchShift', 'distortion', 'reverb'.
     * @param {string|number} effectParam1 - The first parameter for the chosen effect.
     * @param {string|number} effectParam2 - The second parameter for the chosen effect.
     *
     * === Effect-specific parameters ===
     * 'imageModulation': Modulates an audio property based on image brightness.
     *   - effectParam1 (string): Property to modulate. 'gain', 'filter', or 'pitch'. Default: 'gain'.
     *   - effectParam2 (number): Scan speed multiplier across the image. 1.0 means the image is scanned once over the audio's duration. Default: 1.0.
     * 'pitchShift': Changes the audio pitch without changing its speed.
     *   - effectParam1 (number): Semitones to shift the pitch. Can be a negative value. Default: 0.
     * 'distortion': Adds a classic distortion/overdrive effect.
     *   - effectParam1 (number): Amount of distortion. Recommended range 0-1000. Default: 50.
     * 'reverb': Adds reverberation to the sound.
     *   - effectParam1 (number): Reverb decay time in seconds. Default: 3.
     *   - effectParam2 (number): Set to 1 for a reversed reverb effect. Default: 0.
     */

    // Helper function to convert an AudioBuffer into a WAV audio format Blob.
    const bufferToWave = (abuffer) => {
        const numOfChan = abuffer.numberOfChannels;
        const length = abuffer.length * numOfChan * 2 + 44;
        const buffer = new ArrayBuffer(length);
        const view = new DataView(buffer);
        let pos = 0;

        const setUint16 = (data) => {
            view.setUint16(pos, data, true);
            pos += 2;
        };
        const setUint32 = (data) => {
            view.setUint32(pos, data, true);
            pos += 4;
        };

        // Write WAVE header
        setUint32(0x46464952); // "RIFF"
        setUint32(length - 8);
        setUint32(0x45564157); // "WAVE"
        setUint32(0x20746d66); // "fmt " chunk
        setUint32(16);
        setUint16(1); // PCM (uncompressed)
        setUint16(numOfChan);
        setUint32(abuffer.sampleRate);
        setUint32(abuffer.sampleRate * 2 * numOfChan); // avg. bytes/sec
        setUint16(numOfChan * 2); // block-align
        setUint16(16); // 16-bit
        setUint32(0x61746164); // "data" - chunk
        setUint32(length - pos - 4);

        // Get channel data and write interleaved samples
        const channels = [];
        for (let i = 0; i < abuffer.numberOfChannels; i++) {
            channels.push(abuffer.getChannelData(i));
        }

        for (let offset = 0; offset < abuffer.length; offset++) {
            for (let i = 0; i < numOfChan; i++) {
                const sample = Math.max(-1, Math.min(1, channels[i][offset] || 0));
                view.setInt16(pos, sample < 0 ? sample * 32768 : sample * 32767, true);
                pos += 2;
            }
        }
        return new Blob([view], { type: 'audio/wav' });
    };

    const resultContainer = document.createElement('div');
    resultContainer.style.fontFamily = 'sans-serif';
    resultContainer.innerHTML = 'Processing audio...';

    try {
        const response = await fetch(audioUrl);
        if (!response.ok) throw new Error(`Audio fetch failed: ${response.statusText}`);
        const arrayBuffer = await response.arrayBuffer();

        const tempContext = new(window.AudioContext || window.webkitAudioContext)();
        const decodedBuffer = await tempContext.decodeAudioData(arrayBuffer);
        await tempContext.close();

        const offlineContext = new OfflineAudioContext(
            decodedBuffer.numberOfChannels,
            decodedBuffer.length,
            decodedBuffer.sampleRate
        );

        const source = offlineContext.createBufferSource();
        source.buffer = decodedBuffer;
        let lastNode = source;

        // Apply selected audio effect
        switch (effectType) {
            case 'imageModulation': {
                const modulates = String(effectParam1) || 'gain';
                const scanSpeed = Number(effectParam2) || 1.0;

                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d', { willReadFrequently: true });
                canvas.width = originalImg.width;
                canvas.height = originalImg.height;
                ctx.drawImage(originalImg, 0, 0);

                let modulatorNode, automationParam, valueMapper;

                if (modulates === 'filter') {
                    modulatorNode = offlineContext.createBiquadFilter();
                    modulatorNode.type = 'lowpass';
                    modulatorNode.Q.value = 5;
                    automationParam = modulatorNode.frequency;
                    const minFreq = 40, maxFreq = offlineContext.sampleRate / 2;
                    const logMin = Math.log(minFreq), logMax = Math.log(maxFreq);
                    valueMapper = (b) => Math.exp(logMin + (logMax - logMin) * (b / 255));
                } else if (modulates === 'pitch') {
                    automationParam = source.detune; // Modulate source directly
                    const maxDetune = 2400; // Cents, +/- 2 octaves
                    valueMapper = (b) => (b / 255 * 2 - 1) * maxDetune;
                } else { // default to 'gain'
                    modulatorNode = offlineContext.createGain();
                    automationParam = modulatorNode.gain;
                    valueMapper = (b) => b / 255;
                }

                // Schedule parameter changes based on image brightness
                const updatesPerSecond = 60;
                const numSteps = Math.floor(decodedBuffer.duration * updatesPerSecond);
                for (let i = 0; i <= numSteps; i++) {
                    const time = i / updatesPerSecond;
                    if (time > decodedBuffer.duration) break;
                    
                    const progress = time / decodedBuffer.duration;
                    const imageX = Math.floor((progress * canvas.width * scanSpeed) % canvas.width);
                    const sliceData = ctx.getImageData(imageX, 0, 1, canvas.height).data;
                    
                    let sum = 0;
                    for (let j = 0; j < sliceData.length; j += 4) {
                        sum += (sliceData[j] + sliceData[j + 1] + sliceData[j + 2]) / 3;
                    }
                    const avgBrightness = sum / (sliceData.length / 4);
                    const value = valueMapper(avgBrightness);

                    if (i === 0) automationParam.setValueAtTime(value, 0);
                    else automationParam.linearRampToValueAtTime(value, time);
                }
                
                if (modulatorNode) {
                    lastNode.connect(modulatorNode);
                    lastNode = modulatorNode;
                }
                break;
            }
            case 'pitchShift': {
                const pitch = Number(effectParam1) || 0;
                source.detune.value = pitch * 100; // detune is in cents
                break;
            }
            case 'distortion': {
                const amount = Math.max(0, Number(effectParam1) || 50);
                const curve = new Float32Array(44100);
                for (let i = 0; i < curve.length; ++i) {
                    const x = i * 2 / curve.length - 1;
                    curve[i] = (Math.PI + amount) * x / (Math.PI + amount * Math.abs(x));
                }
                const distortion = offlineContext.createWaveShaper();
                distortion.curve = curve;
                distortion.oversample = '4x';
                lastNode.connect(distortion);
                lastNode = distortion;
                break;
            }
            case 'reverb': {
                const decay = Math.max(0.1, Number(effectParam1) || 3);
                const reverse = Number(effectParam2) || 0;
                const len = offlineContext.sampleRate * decay;
                const impulse = offlineContext.createBuffer(2, len, offlineContext.sampleRate);
                for (let c = 0; c < 2; c++) {
                    const data = impulse.getChannelData(c);
                    for (let i = 0; i < len; i++) {
                        const n = reverse ? len - i : i;
                        data[i] = (Math.random() * 2 - 1) * Math.pow(1 - n / len, 2.5);
                    }
                }
                const convolver = offlineContext.createConvolver();
                convolver.buffer = impulse;
                lastNode.connect(convolver);
                lastNode = convolver;
                break;
            }
        }
        
        lastNode.connect(offlineContext.destination);
        source.start(0);

        const renderedBuffer = await offlineContext.startRendering();
        const wavBlob = bufferToWave(renderedBuffer);
        const audioObjectUrl = URL.createObjectURL(wavBlob);

        resultContainer.innerHTML = '';
        const title = document.createElement('h3');
        title.textContent = `Result for Effect: ${effectType}`;
        resultContainer.appendChild(title);

        const audioElement = document.createElement('audio');
        audioElement.controls = true;
        audioElement.src = audioObjectUrl;
        audioElement.style.width = '100%';
        resultContainer.appendChild(audioElement);

        const downloadLink = document.createElement('a');
        downloadLink.href = audioObjectUrl;
        downloadLink.download = `processed_audio_${effectType}.wav`;
        downloadLink.textContent = 'Download as .WAV';
        downloadLink.style.display = 'block';
        downloadLink.style.marginTop = '10px';
        resultContainer.appendChild(downloadLink);

    } catch (error) {
        console.error('ImageAudioEffects error:', error);
        resultContainer.innerHTML = `An error occurred: ${error.message}. <br>Check if the audio URL is valid and allows cross-origin requests (CORS).`;
        resultContainer.style.color = 'red';
    }

    return resultContainer;
}