Kurdish Dub Audio To Image Converter

function processImage(originalImg, dubTitle = "Kurdish Dub (Shirzad Sendi)", barColor = "rgba(0, 0, 0, 0.75)", playedFraction = 0.35) {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    const width = originalImg.width;
    const height = originalImg.height;

    canvas.width = width;
    canvas.height = height;

    // Draw the original image
    ctx.drawImage(originalImg, 0, 0);

    // Calculate dimensions for the audio player overlay overlay
    const barHeight = Math.max(90, height * 0.15);
    const yPoint = height - barHeight;

    // 1. Draw the audio background banner at the bottom
    ctx.fillStyle = barColor;
    ctx.fillRect(0, yPoint, width, barHeight);

    // 2. Draw Play Button Surface
    const radius = Math.min(barHeight * 0.3, width * 0.1);
    const cx = Math.max(20 + radius, width * 0.05 + radius);
    const cy = yPoint + barHeight / 2;

    ctx.beginPath();
    ctx.arc(cx, cy, radius, 0, 2 * Math.PI);
    ctx.fillStyle = "#1db954"; // Standard audio/music green
    ctx.fill();

    // Play Button Icon (Triangle)
    ctx.beginPath();
    const triSize = radius * 0.4;
    ctx.moveTo(cx - triSize * 0.5, cy - triSize);
    ctx.lineTo(cx + triSize, cy);
    ctx.lineTo(cx - triSize * 0.5, cy + triSize);
    ctx.closePath();
    ctx.fillStyle = "#ffffff";
    ctx.fill();

    // 3. Draw Title Text
    const textX = cx + radius + 15;
    const textY = yPoint + barHeight * 0.35;
    const fontSize = Math.max(12, Math.floor(barHeight * 0.22));
    
    ctx.font = `bold ${fontSize}px sans-serif`;
    ctx.fillStyle = "white";
    ctx.textBaseline = "middle";
    ctx.fillText(dubTitle, textX, textY);

    // 4. Draw Audio Waveform
    const progressX = textX;
    const progressY = yPoint + barHeight * 0.75;
    const progressWidth = width - progressX - 30;

    if (progressWidth > 20) {
        const barW = Math.max(3, barHeight * 0.04);
        const gap = 3;
        const numBars = Math.floor(progressWidth / (barW + gap));
        
        for (let i = 0; i < numBars; i++) {
            // Generate pseudo-random realistic looking audio waves using sine and cosine over the index
            const waveAmplitude = (Math.abs(Math.sin(i * 0.8)) * 0.6 + Math.abs(Math.cos(i * 3.2)) * 0.4);
            const maxH = barHeight * 0.35;
            let barH = waveAmplitude * maxH + (barHeight * 0.05);

            // Determine if wave part is 'played' or not
            const fraction = i / numBars;
            if (fraction <= playedFraction) {
                ctx.fillStyle = "#1db954"; 
            } else {
                ctx.fillStyle = "rgba(255, 255, 255, 0.4)";
            }

            const x = progressX + i * (barW + gap);
            const y = progressY - barH / 2;

            // Draw rounded or standard rect depending on browser support
            ctx.beginPath();
            if (ctx.roundRect) {
                ctx.roundRect(x, y, barW, barH, barW / 2);
            } else {
                ctx.rect(x, y, barW, barH);
            }
            ctx.fill();
        }
    }

    return canvas;
}