Audio File Not Supported

function processImage(originalImg, mainText = "Audio File Not Supported", subText = "Audio Universal Pictures David Newman Fanfare") {
    const canvas = document.createElement('canvas');
    const width = originalImg.width;
    const height = originalImg.height;
    
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // Draw the original image as a background
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Apply a dark semi-transparent overlay to make the error message pop
    ctx.fillStyle = 'rgba(15, 15, 20, 0.85)';
    ctx.fillRect(0, 0, width, height);

    const centerX = width / 2;
    const centerY = height / 2;
    
    // Scale features based on the image size
    const baseScale = Math.min(width, height);
    const iconSize = Math.max(30, baseScale * 0.15);
    const titleFontSize = Math.max(16, baseScale * 0.06);
    const subtitleFontSize = Math.max(12, baseScale * 0.035);

    // Draw an error speaker icon (Speaker with an 'X')
    ctx.save();
    // Move slightly above center to accommodate text below
    ctx.translate(centerX, centerY - iconSize); 
    
    // Draw speaker body
    ctx.fillStyle = '#ff4a4a';
    ctx.beginPath();
    ctx.moveTo(-iconSize / 2, -iconSize / 4);
    ctx.lineTo(-iconSize / 6, -iconSize / 4);
    ctx.lineTo(iconSize / 4, -iconSize / 1.5);
    ctx.lineTo(iconSize / 4, iconSize / 1.5);
    ctx.lineTo(-iconSize / 6, iconSize / 4);
    ctx.lineTo(-iconSize / 2, iconSize / 4);
    ctx.closePath();
    ctx.fill();

    // Draw the 'X' cross indicating no audio
    ctx.strokeStyle = '#ff4a4a';
    ctx.lineWidth = Math.max(2, iconSize / 10);
    ctx.lineCap = 'round';
    
    const xOffset = iconSize / 2;
    const xSize = iconSize / 3;
    
    ctx.beginPath();
    // Top-left to bottom-right line
    ctx.moveTo(xOffset, -xSize);
    ctx.lineTo(xOffset + xSize * 2, xSize);
    // Bottom-left to top-right line
    ctx.moveTo(xOffset, xSize);
    ctx.lineTo(xOffset + xSize * 2, -xSize);
    ctx.stroke();
    
    ctx.restore();

    // Configure text styling
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    const maxTextWidth = width * 0.9;

    // Draw "Audio File Not Supported" (or provided mainText)
    ctx.fillStyle = '#ffffff';
    ctx.font = `bold ${titleFontSize}px "Helvetica Neue", Helvetica, Arial, sans-serif`;
    ctx.fillText(mainText, centerX, centerY + titleFontSize);

    // Draw subtext description
    ctx.fillStyle = '#aaaaaa';
    ctx.font = `${subtitleFontSize}px "Helvetica Neue", Helvetica, Arial, sans-serif`;
    ctx.fillText(subText, centerX, centerY + titleFontSize + subtitleFontSize * 1.8, maxTextWidth);

    return canvas;
}