Slow Motion Video And Audio Playback Tool

function processImage(originalImg, defaultSpeedStr = "0.2") {
    // Create the main container
    const container = document.createElement('div');
    container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.alignItems = 'center';
    container.style.gap = '15px';
    container.style.padding = '25px';
    container.style.backgroundColor = '#f8f9fa';
    container.style.border = '1px solid #dee2e6';
    container.style.borderRadius = '12px';
    container.style.maxWidth = '600px';
    container.style.margin = '0 auto';
    container.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';

    // Title
    const title = document.createElement('h2');
    title.textContent = 'Slow Motion Video & Audio Player';
    title.style.margin = '0';
    title.style.color = '#343a40';

    const subtitle = document.createElement('p');
    subtitle.textContent = `Default playback speed is set to ${parseFloat(defaultSpeedStr) * 100}% of original.`;
    subtitle.style.margin = '0';
    subtitle.style.fontSize = '14px';
    subtitle.style.color = '#6c757d';

    // Original Image Display (acts as an initial placeholder/poster)
    const imgDisplay = new Image();
    imgDisplay.src = originalImg.src;
    imgDisplay.style.maxWidth = '100%';
    imgDisplay.style.maxHeight = '250px';
    imgDisplay.style.objectFit = 'contain';
    imgDisplay.style.borderRadius = '8px';
    imgDisplay.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';

    // File Input Section
    const uploadContainer = document.createElement('div');
    uploadContainer.style.display = 'flex';
    uploadContainer.style.flexDirection = 'column';
    uploadContainer.style.alignItems = 'center';
    uploadContainer.style.gap = '8px';
    uploadContainer.style.width = '100%';

    const fileLabel = document.createElement('label');
    fileLabel.textContent = 'Upload Video or Audio to Slow Down:';
    fileLabel.style.fontWeight = '600';
    fileLabel.style.color = '#495057';

    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.accept = 'video/*, audio/*';
    fileInput.style.padding = '8px';
    fileInput.style.border = '1px dashed #adb5bd';
    fileInput.style.borderRadius = '6px';
    fileInput.style.width = '100%';
    fileInput.style.boxSizing = 'border-box';
    fileInput.style.cursor = 'pointer';

    // Playback Speed Controls
    const rateContainer = document.createElement('div');
    rateContainer.style.display = 'flex';
    rateContainer.style.alignItems = 'center';
    rateContainer.style.gap = '10px';
    rateContainer.style.marginTop = '10px';

    const rateLabel = document.createElement('label');
    rateLabel.textContent = 'Playback Speed (x): ';
    rateLabel.style.fontWeight = '600';

    const rateInput = document.createElement('input');
    rateInput.type = 'number';
    rateInput.step = '0.05';
    rateInput.min = '0.05';
    rateInput.max = '4.0';
    rateInput.value = parseFloat(defaultSpeedStr) || 0.2;
    rateInput.style.padding = '4px 8px';
    rateInput.style.width = '70px';
    rateInput.style.borderRadius = '4px';
    rateInput.style.border = '1px solid #ced4da';

    rateContainer.appendChild(rateLabel);
    rateContainer.appendChild(rateInput);

    uploadContainer.appendChild(fileLabel);
    uploadContainer.appendChild(fileInput);
    uploadContainer.appendChild(rateContainer);

    // Media Element (Video/Audio Player)
    const mediaElement = document.createElement('video');
    mediaElement.controls = true;
    mediaElement.style.maxWidth = '100%';
    mediaElement.style.borderRadius = '8px';
    mediaElement.style.display = 'none'; // Hidden until media is loaded
    mediaElement.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';

    // Event Listeners
    let currentObjectUrl = null;

    fileInput.addEventListener('change', (e) => {
        const file = e.target.files[0];
        if (file) {
            if (currentObjectUrl) {
                URL.revokeObjectURL(currentObjectUrl);
            }
            currentObjectUrl = URL.createObjectURL(file);
            mediaElement.src = currentObjectUrl;
            mediaElement.style.display = 'block';
            
            const targetSpeed = parseFloat(rateInput.value);
            mediaElement.playbackRate = !isNaN(targetSpeed) && targetSpeed > 0 ? targetSpeed : 0.2;
            
            // Hide the original placeholder image when the user uploads media
            imgDisplay.style.display = 'none';
        }
    });

    rateInput.addEventListener('input', (e) => {
        const speed = parseFloat(e.target.value);
        if (!isNaN(speed) && speed > 0 && speed <= 16) {
            mediaElement.playbackRate = speed;
        }
    });

    mediaElement.addEventListener('loadeddata', () => {
        const targetSpeed = parseFloat(rateInput.value);
        mediaElement.playbackRate = !isNaN(targetSpeed) && targetSpeed > 0 ? targetSpeed : 0.2;
    });

    // Assemble the container
    container.appendChild(title);
    container.appendChild(subtitle);
    container.appendChild(imgDisplay);
    container.appendChild(uploadContainer);
    container.appendChild(mediaElement);

    return container;
}