Musicard: Turn Songs into Stunning Visual Cards 🎵

Musicard 🎵

Generate beautiful, stylized music card images with a variety of modern, customizable themes.

Check our more • Join our Discord

✨ Features

• Multiple Themes: Instantly switch between unique card layouts.
• Customizable Styles: Change colors, fonts, progress bars, and more for each theme.
• Explicit Content Badge: Show/hide explicit content indicator.
• Flexible Inputs: Accepts image buffers or URLs for album art.
• Font Management: Easily register and use custom fonts.

---

🎨 Themes

Themes	Preview
Bloom
Haze
Melt
Ease
Drift
Calm

---

🚀 Quick Start

npm install musicard

import { initializeFonts, Bloom } from 'musicard';
import fs from 'node:fs';

// Display all available font names
import { GlobalFonts } from 'musicard';
console.log(GlobalFonts); // Shows all registered font names

(async () => {
    initializeFonts();

    const musicard = await Bloom({
        trackName: "Run It Up",
        artistName: "Hanumankind",
        albumArt: "https://lh3.googleusercontent.com/6DSrfLUE2JEPhwnF-IFuM5IP8rL8DgrpWPtqh0GvCkdT25Vl5lw3nEjLu-dZ3qIByuoEmU7MS3D8PakF=w544-h544-l90-rj",
        isExplicit: true,
        timeAdjust: {
            timeStart: "0:00",
            timeEnd: "2:54",
        },
        progressBar: 10,
        volumeBar: 70,
    });

    fs.writeFileSync('example.png', musicard);
    console.log('✅-> example.png');
})();

---

🖨️ List All Available Fonts

To see all font names currently registered and available for use:

import { GlobalFonts } from 'musicard';
console.log(GlobalFonts); // Prints all registered font names

🤖 Usage with Discord Bot

Here's how you can use musicard in a Discord bot to generate and send a music card image:

const { initializeFonts, Bloom } = require("musicard");
const fs = require("fs")

await initializeFonts();
const musicard = await Bloom({...})

...

return message.channel.send({
    files: [{
        attachment: musicard
    }]
})

---

🛠️ API Overview

Each theme exports a function with options for customization:

type ThemeOptions = {
    albumArt: string | Buffer;
    fallbackArt: string;
    artistName: string;
    trackName: string;
    progressBar?: number;
    volumeBar?: number; // Ease, Melt
    timeAdjust: { timeStart: string, timeEnd: string };
    styleConfig?: {
        artistStyle?: { textColor?: string; textItalic?: boolean; textGlow?: boolean };
        trackStyle?: { textColor?: string; textItalic?: boolean; textGlow?: boolean };
        timeStyle?: { textColor?: string; textItalic?: boolean };
        progressBarStyle?: { barColor: string; barColorDuo?: boolean };
        volumeBarStyle?: { barColor: string; barColorDuo?: boolean };
    };
    isExplicit?: boolean;
};

---

🖋️ Fonts

To use custom fonts, create a Fonts folder in your project's root directory and place your font files (e.g., .ttf, .otf) inside it.

Register and use custom fonts:

import { registerFont } from 'musicard';
registerFont('MyFont.ttf', 'MyFont');