Audio Effects For Pitch And Speed Adjustment

/**
 * Processes an audio file from a URL to apply pitch and speed effects.
 * NOTE: The audio URL must be on the same domain or from a server with CORS enabled
 * (Access-Control-Allow-Origin header).
 *
 * @param {Image} originalImg - An ignored Image object, included for compatibility with the required function signature.
 * @param {string} audioUrl - The URL of the audio file to process.
 * @param {number} pitch - A multiplier for the audio pitch. 1.0 is normal pitch. 2.0 is one octave up, 0.5 is one octave down.
 * @param {number} speed - A multiplier for the audio playback speed. 1.0 is normal speed.
 * @returns {Promise<HTMLElement>} A promise that resolves to an HTML element containing a play button for the processed audio.
 */
async function processImage(originalImg, audioUrl = '', pitch = 1.0, speed = 1.0) {
    // Validate input parameters
    if (!audioUrl) {
        const errorDiv = document.createElement('div');
        errorDiv.textContent = 'Error: Please provide a valid audio URL.';
        errorDiv.style.color = 'red';
        return errorDiv;
    }
     if (typeof pitch !== 'number' || pitch <= 0 || typeof speed !== 'number' || speed <= 0) {
        const errorDiv = document.createElement('div');
        errorDiv.textContent = 'Error: Pitch and speed must be positive numbers.';
        errorDiv.style.color = 'red';
        return errorDiv;
    }

    try {
        // Create an AudioContext. This is the main entry point to the Web Audio API.
        const audioContext = new(window.AudioContext || window.webkitAudioContext)();

        // Fetch the audio file from the provided URL.
        const response = await fetch(audioUrl);
        if (!response.ok) {
            throw new Error(`Failed to fetch audio: ${response.statusText}`);
        }
        const arrayBuffer = await response.arrayBuffer();

        // Decode the audio data into an AudioBuffer that we can play.
        const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);

        // Create the UI element to be returned.
        const container = document.createElement('div');
        container.style.padding = '15px';
        container.style.border = '1px solid #ddd';
        container.style.borderRadius = '8px';
        container.style.backgroundColor = '#f9f9f9';
        container.style.display = 'inline-block';
        container.style.fontFamily = 'Arial, sans-serif';
        container.style.textAlign = 'center';

        const title = document.createElement('p');
        title.textContent = 'Audio Player';
        title.style.margin = '0 0 10px 0';
        title.style.fontWeight = 'bold';
        container.appendChild(title);

        const info = document.createElement('p');
        info.textContent = `Pitch: x${pitch}, Speed: x${speed}`;
        info.style.margin = '0 0 15px 0';
        info.style.fontSize = '14px';
        info.style.color = '#555';
        container.appendChild(info);

        const playButton = document.createElement('button');
        playButton.textContent = '▶ Play';
        playButton.style.padding = '10px 20px';
        playButton.style.fontSize = '16px';
        playButton.style.cursor = 'pointer';
        playButton.style.border = 'none';
        playButton.style.borderRadius = '5px';
        playButton.style.backgroundColor = '#4CAF50';
        playButton.style.color = 'white';
        container.appendChild(playButton);

        let currentSourceNode = null;

        // Attach click event to the play button
        playButton.onclick = () => {
            // Browsers often require user interaction to start audio.
            // Resume the context if it's in a suspended state.
            if (audioContext.state === 'suspended') {
                audioContext.resume();
            }

            // If audio is already playing, stop it before starting again.
            if (currentSourceNode) {
                try {
                    currentSourceNode.stop();
                } catch(e) {
                    // Ignore errors if the node is already stopped.
                }
            }

            // Create a new source node for playback. AudioBufferSourceNodes are single-use.
            const sourceNode = audioContext.createBufferSource();
            sourceNode.buffer = audioBuffer;

            // Apply the speed effect via playbackRate.
            sourceNode.playbackRate.value = speed;

            // Apply the pitch effect via detune. We convert the pitch multiplier to "cents".
            // An octave up (2x pitch) is +1200 cents. An octave down (0.5x pitch) is -1200 cents.
            // The formula is: Cents = 1200 * log2(PitchRatio)
            const detuneInCents = 1200 * Math.log2(pitch);
            sourceNode.detune.value = detuneInCents;

            // Connect the source node to the speakers (the destination of the audio context).
            sourceNode.connect(audioContext.destination);

            // Start playing the audio immediately.
            sourceNode.start(0);

            // Keep track of the current source node.
            currentSourceNode = sourceNode;

            // Clean up the reference when playback finishes.
            sourceNode.onended = () => {
                currentSourceNode = null;
            };
        };

        // Return the interactive player element.
        return container;

    } catch (error) {
        console.error('Error processing audio:', error);
        const errorDiv = document.createElement('div');
        errorDiv.textContent = `Error: ${error.message}. Check if the audio URL is correct and allows cross-origin requests (CORS).`;
        errorDiv.style.color = 'red';
        errorDiv.style.padding = '10px';
        errorDiv.style.border = '1px solid red';
        return errorDiv;
    }
}