Image HSL 180 Invert And Audio Reverse Tool

async function processImage(originalImg) {
    /**
     * Helper function to convert an AudioBuffer into a Blob in WAV format.
     * @param {AudioBuffer} abuffer The AudioBuffer to convert.
     * @returns {Blob} A Blob object representing the WAV file.
     */
    function bufferToWave(abuffer) {
        const numOfChan = abuffer.numberOfChannels;
        const aLength = abuffer.length;
        const bufferLength = aLength * numOfChan * 2 + 44;
        const buffer = new ArrayBuffer(bufferLength);
        const view = new DataView(buffer);
        let pos = 0;

        // Helper to write strings
        const writeString = (s) => {
            for (let i = 0; i < s.length; i++) {
                view.setUint8(pos++, s.charCodeAt(i));
            }
        };
        // Helper to write 16-bit and 32-bit numbers
        const setUint16 = (data) => {
            view.setUint16(pos, data, true);
            pos += 2;
        };
        const setUint32 = (data) => {
            view.setUint32(pos, data, true);
            pos += 4;
        };

        // RIFF chunk descriptor
        writeString('RIFF');
        setUint32(bufferLength - 8);
        writeString('WAVE');

        // fmt sub-chunk
        writeString('fmt ');
        setUint32(16); // Sub-chunk size
        setUint16(1); // PCM audio format
        setUint16(numOfChan);
        setUint32(abuffer.sampleRate);
        setUint32(abuffer.sampleRate * 2 * numOfChan); // byteRate
        setUint16(numOfChan * 2); // blockAlign
        setUint16(16); // 16 bits per sample

        // data sub-chunk
        writeString('data');
        setUint32(aLength * numOfChan * 2);

        // Write the PCM audio data
        for (let i = 0; i < abuffer.numberOfChannels; i++) {
            const channelData = abuffer.getChannelData(i);
            for (let j = 0; j < aLength; j++) {
                const sample = Math.max(-1, Math.min(1, channelData[j]));
                // The actual position in the buffer needs to account for interleaving
                const dataPos = 44 + (j * numOfChan + i) * 2;
                view.setInt16(dataPos, sample < 0 ? sample * 0x8000 : sample * 0x7FFF, true);
            }
        }
        
        return new Blob([view], { type: 'audio/wav' });
    }
    
    /**
     * Asynchronously fetches, reverses, and prepares an audio source for playback.
     * @param {string} src - The URL of the audio/video source.
     * @returns {Promise<HTMLElement>} A promise that resolves to an <audio> element or a <p> element on error.
     */
    const processAudio = async (src) => {
        try {
            const audioCtx = new(window.AudioContext || window.webkitAudioContext)();
            const response = await fetch(src);
             if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            const arrayBuffer = await response.arrayBuffer();
            const audioBuffer = await audioCtx.decodeAudioData(arrayBuffer);

            const reversedBuffer = audioCtx.createBuffer(
                audioBuffer.numberOfChannels,
                audioBuffer.length,
                audioBuffer.sampleRate
            );

            for (let i = 0; i < audioBuffer.numberOfChannels; i++) {
                // Get original data, create a reversed copy, and set it in the new buffer
                const channelData = audioBuffer.getChannelData(i);
                const reversedData = Float32Array.from(channelData).reverse();
                reversedBuffer.copyToChannel(reversedData, i);
            }

            const wavBlob = bufferToWave(reversedBuffer);
            const newAudio = document.createElement('audio');
            newAudio.controls = true;
            newAudio.autoplay = true;
            newAudio.loop = true;
            newAudio.src = URL.createObjectURL(wavBlob);
            return newAudio;

        } catch (error) {
            console.error("Audio processing failed:", error);
            const p = document.createElement('p');
            p.textContent = `Could not process audio. Error: ${error.message}. Check CORS policy if media is from another domain.`;
            return p;
        }
    };
    
    // Validate input
    if (!(originalImg instanceof HTMLElement) || !originalImg.src) {
        console.error("Invalid input: Expected an HTML element with a 'src' attribute.");
        const p = document.createElement('p');
        p.textContent = 'Invalid input. Please provide a valid Image, Video, or Audio element.';
        return p;
    }

    // --- CASE 1: Image or GIF ---
    if (originalImg instanceof HTMLImageElement) {
        const newImg = originalImg.cloneNode(true);
        newImg.style.filter = 'hue-rotate(180deg) invert(1)';
        newImg.style.transform = 'scaleX(-1)';
        return newImg;
    }

    // --- CASE 2: Video ---
    if (originalImg instanceof HTMLVideoElement) {
        const container = document.createElement('div');
        
        // Process video visuals
        const newVideo = originalImg.cloneNode(true);
        newVideo.style.filter = 'hue-rotate(180deg) invert(1)';
        newVideo.style.transform = 'scaleX(-1)';
        newVideo.muted = true; // Mute the original audio track
        newVideo.autoplay = true;
        newVideo.loop = true;
        newVideo.playsInline = true;
        
        container.appendChild(newVideo);
        
        // Process and add reversed audio
        const reversedAudioElement = await processAudio(originalImg.src);
        container.appendChild(reversedAudioElement);
        
        return container;
    }

    // --- CASE 3: Audio ---
    if (originalImg instanceof HTMLAudioElement) {
        return await processAudio(originalImg.src);
    }
    
    // Fallback for unsupported elements
    const p = document.createElement('p');
    p.textContent = `Unsupported element type: ${originalImg.tagName}`;
    return p;
}