Image Audiobook Viewer

/**
 * Creates an "Audiobook Viewer" component that displays an image
 * alongside an audio player.
 *
 * @param {Image} originalImg The JavaScript Image object to display (e.g., as a cover).
 * @param {string} audioSrc The URL of the audio file to be played.
 * @param {string} title The title of the audiobook, displayed above the image.
 * @param {number} autoplay Set to 1 to make the audio play automatically, 0 otherwise.
 * @param {number} loop Set to 1 to make the audio loop, 0 otherwise.
 * @returns {HTMLElement} A single div element containing the image and audio player, ready to be displayed.
 */
function processImage(originalImg, audioSrc = '', title = 'Audiobook', autoplay = 0, loop = 0) {
    // Create the main container element for the viewer
    const container = document.createElement('div');
    container.style.maxWidth = '600px';
    container.style.margin = '20px auto';
    container.style.border = '1px solid #e0e0e0';
    container.style.borderRadius = '12px';
    container.style.overflow = 'hidden';
    container.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
    container.style.boxShadow = '0 8px 16px rgba(0, 0, 0, 0.1)';
    container.style.backgroundColor = '#ffffff';

    // Create and add the title element if a title is provided
    if (title) {
        const titleElement = document.createElement('h3');
        titleElement.textContent = title;
        titleElement.style.margin = '0';
        titleElement.style.padding = '16px 20px';
        titleElement.style.backgroundColor = '#f9fafb';
        titleElement.style.textAlign = 'center';
        titleElement.style.borderBottom = '1px solid #e0e0e0';
        titleElement.style.fontSize = '1.25em';
        titleElement.style.fontWeight = '600';
        titleElement.style.color = '#333';
        container.appendChild(titleElement);
    }

    // Style the provided image to be responsive within the container
    originalImg.style.display = 'block';
    originalImg.style.width = '100%';
    originalImg.style.height = 'auto';
    container.appendChild(originalImg);

    // Create and configure the audio player if an audio source is provided
    if (audioSrc) {
        const audioPlayer = document.createElement('audio');
        audioPlayer.src = audioSrc;
        audioPlayer.controls = true; // Show default browser controls
        audioPlayer.autoplay = autoplay === 1;
        audioPlayer.loop = loop === 1;

        // Style the audio player for consistency
        audioPlayer.style.width = '100%';
        audioPlayer.style.display = 'block';
        // A small negative margin can help align the player flush with the image
        audioPlayer.style.marginTop = '-4px'; 
        
        container.appendChild(audioPlayer);
    } else {
        // If no audio source is provided, display a placeholder message
        const noAudioMessage = document.createElement('p');
        noAudioMessage.textContent = 'No audio source provided.';
        noAudioMessage.style.textAlign = 'center';
        noAudioMessage.style.padding = '20px';
        noAudioMessage.style.color = '#888';
        noAudioMessage.style.margin = '0';
        noAudioMessage.style.backgroundColor = '#f9fafb';
        container.appendChild(noAudioMessage);
    }

    // Return the assembled viewer element
    return container;
}