Please bookmark this page to avoid losing your image tool!

Image Audiobook Viewer

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image tool.
/**
 * 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;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The Image Audiobook Viewer is a tool designed to enhance the experience of listening to audiobooks by allowing users to view an image, such as the audiobook cover, alongside an audio player. This viewer displays the title of the audiobook prominently and includes options for autoplay and looping the audio. It is ideal for audiobook enthusiasts who wish to engage visually while enjoying the audio content, making it suitable for use on personal blogs, educational websites, or audiobook promotion platforms.

Leave a Reply

Your email address will not be published. Required fields are marked *