diff --git a/assets/example.png b/assets/example.png deleted file mode 100644 index fb8c499..0000000 Binary files a/assets/example.png and /dev/null differ diff --git a/assets/musicard.jpg b/assets/musicard.jpg deleted file mode 100644 index b206cd1..0000000 Binary files a/assets/musicard.jpg and /dev/null differ diff --git a/build/index.d.ts b/build/index.d.ts index 90eb1c0..ce85668 100644 --- a/build/index.d.ts +++ b/build/index.d.ts @@ -4,6 +4,7 @@ export declare class musicCard { public setName(name: string): this; public setAuthor(author: string): this; public setColor(color: string): this; + public setTheme(theme: "classic" | "dynamic"): this; public setBrightness(brightness: number): this; public setThumbnail(thumbnail: string): this; public setProgress(progress: number): this; diff --git a/res/fonts/circularstd-black.otf b/build/structures/font/circularstd-black.otf similarity index 100% rename from res/fonts/circularstd-black.otf rename to build/structures/font/circularstd-black.otf diff --git a/res/fonts/notoemoji-bold.ttf b/build/structures/font/notoemoji-bold.ttf similarity index 100% rename from res/fonts/notoemoji-bold.ttf rename to build/structures/font/notoemoji-bold.ttf diff --git a/res/fonts/notosans-black.ttf b/build/structures/font/notosans-black.ttf similarity index 100% rename from res/fonts/notosans-black.ttf rename to build/structures/font/notosans-black.ttf diff --git a/res/fonts/notosans-jp-black.ttf b/build/structures/font/notosans-jp-black.ttf similarity index 100% rename from res/fonts/notosans-jp-black.ttf rename to build/structures/font/notosans-jp-black.ttf diff --git a/res/fonts/notosans-kr-black.ttf b/build/structures/font/notosans-kr-black.ttf similarity index 100% rename from res/fonts/notosans-kr-black.ttf rename to build/structures/font/notosans-kr-black.ttf diff --git a/build/structures/musicCard.js b/build/structures/musicCard.js index a949d75..0066b31 100644 --- a/build/structures/musicCard.js +++ b/build/structures/musicCard.js @@ -1,21 +1,24 @@ -const devmod = false; - const canvas = require("@napi-rs/canvas"); const { colorFetch } = require("../functions/colorFetch"); -// Register fonts -canvas.GlobalFonts.registerFromPath(`${devmod ? "" : "node_modules/musicard/"}res/fonts/circularstd-black.otf`, "circular-std"); -canvas.GlobalFonts.registerFromPath(`${devmod ? "" : "node_modules/musicard/"}res/fonts/notosans-jp-black.ttf`, "noto-sans-jp"); -canvas.GlobalFonts.registerFromPath(`${devmod ? "" : "node_modules/musicard/"}res/fonts/notosans-black.ttf`, "noto-sans"); -canvas.GlobalFonts.registerFromPath(`${devmod ? "" : "node_modules/musicard/"}res/fonts/notoemoji-bold.ttf`, "noto-emoji"); -canvas.GlobalFonts.registerFromPath(`${devmod ? "" : "node_modules/musicard/"}res/fonts/notosans-kr-black.ttf`, "noto-sans-kr"); +canvas.GlobalFonts.registerFromPath(`build/structures/font/circularstd-black.otf`, "circular-std"); +canvas.GlobalFonts.registerFromPath(`build/structures/font/notosans-jp-black.ttf`, "noto-sans-jp"); +canvas.GlobalFonts.registerFromPath(`build/structures/font/notosans-black.ttf`, "noto-sans"); +canvas.GlobalFonts.registerFromPath(`build/structures/font/notoemoji-bold.ttf`, "noto-emoji"); +canvas.GlobalFonts.registerFromPath(`build/structures/font/notosans-kr-black.ttf`, "noto-sans-kr"); + +// canvas.GlobalFonts.registerFromPath(`node_modules/musicard/build/structures/font/circularstd-black.otf`, "circular-std"); +// canvas.GlobalFonts.registerFromPath(`node_modules/musicard/build/structures/font/notosans-jp-black.ttf`, "noto-sans-jp"); +// canvas.GlobalFonts.registerFromPath(`node_modules/musicard/build/structures/font/notosans-black.ttf`, "noto-sans"); +// canvas.GlobalFonts.registerFromPath(`node_modules/musicard/build/structures/font/notoemoji-bold.ttf`, "noto-emoji"); +// canvas.GlobalFonts.registerFromPath(`node_modules/musicard/build/structures/font/notosans-kr-black.ttf`, "noto-sans-kr"); -// Create music card class class musicCard { constructor() { this.name = null; this.author = null; this.color = null; + this.theme = null; this.brightness = null; this.thumbnail = null; this.progress = null; @@ -38,6 +41,11 @@ class musicCard { return this; } + setTheme(theme) { + this.theme = theme || 'classic'; + return this; + } + setBrightness(brightness) { this.brightness = brightness; return this; @@ -64,19 +72,21 @@ class musicCard { } async build() { - if (!this.name) { throw new Error('Missing name parameter'); } - if (!this.author) { throw new Error('Missing author parameter'); } + if (!this.name) throw new Error('Missing name parameter'); + if (!this.author) throw new Error('Missing author parameter'); + if (!this.color) this.setColor('ff0000'); + if (!this.theme) this.setTheme('classic'); + if (!this.brightness) this.setBrightness(0); + if (!this.thumbnail) this.setThumbnail('https://s6.imgcdn.dev/Opo4a.jpg'); + if (!this.progress) this.setProgress(0); + if (!this.starttime) this.setStartTime('0:00'); + if (!this.endtime) this.setEndTime('0:00'); let validatedProgress = parseFloat(this.progress); - if (Number.isNaN(validatedProgress) || validatedProgress < 0 || validatedProgress > 100) { - throw new Error('Invalid progress parameter, must be between 0 to 100'); - } - - if (validatedProgress < 2) { - validatedProgress = 2; - } + if (Number.isNaN(validatedProgress) || validatedProgress < 0 || validatedProgress > 100) throw new Error('Invalid progress parameter, must be between 0 to 100'); - let thumbnailURL = this.thumbnail || `${devmod ? "" : "node_modules/musicard/"}res/noimage.jpg`; + if (validatedProgress < 2) validatedProgress = 2; + if (validatedProgress > 99) validatedProgress = 99; const validatedStartTime = this.starttime || '0:00'; const validatedEndTime = this.endtime || '0:00'; @@ -84,154 +94,191 @@ class musicCard { const validatedColor = await colorFetch( this.color || 'ff0000', parseInt(this.brightness) || 0, - thumbnailURL - ); - - const progressBarWidth = (validatedProgress / 100) * 670; - const circleX = progressBarWidth + 60; - - const progressBarCanvas = canvas.createCanvas(670, 25); - const progressBarCtx = progressBarCanvas.getContext('2d'); - const cornerRadius = 10; - progressBarCtx.beginPath(); - progressBarCtx.moveTo(cornerRadius, 0); - progressBarCtx.lineTo(670 - cornerRadius, 0); - progressBarCtx.arc(670 - cornerRadius, cornerRadius, cornerRadius, 1.5 * Math.PI, 2 * Math.PI); - progressBarCtx.lineTo(670, 25 - cornerRadius); - progressBarCtx.arc(670 - cornerRadius, 25 - cornerRadius, cornerRadius, 0, 0.5 * Math.PI); - progressBarCtx.lineTo(cornerRadius, 25); - progressBarCtx.arc(cornerRadius, 25 - cornerRadius, cornerRadius, 0.5 * Math.PI, Math.PI); - progressBarCtx.lineTo(0, cornerRadius); - progressBarCtx.arc(cornerRadius, cornerRadius, cornerRadius, Math.PI, 1.5 * Math.PI); - progressBarCtx.closePath(); - progressBarCtx.fillStyle = '#ababab'; - progressBarCtx.fill(); - progressBarCtx.beginPath(); - progressBarCtx.moveTo(cornerRadius, 0); - progressBarCtx.lineTo(progressBarWidth - cornerRadius, 0); - progressBarCtx.arc( - progressBarWidth - cornerRadius, - cornerRadius, - cornerRadius, - 1.5 * Math.PI, - 2 * Math.PI, + this.thumbnail ); - progressBarCtx.lineTo(progressBarWidth, 25); - progressBarCtx.lineTo(cornerRadius, 25); - progressBarCtx.arc(cornerRadius, 25 - cornerRadius, cornerRadius, 0.5 * Math.PI, Math.PI); - progressBarCtx.lineTo(0, cornerRadius); - progressBarCtx.arc(cornerRadius, cornerRadius, cornerRadius, Math.PI, 1.5 * Math.PI); - progressBarCtx.closePath(); - progressBarCtx.fillStyle = `#${validatedColor}`; - progressBarCtx.fill(); - const circleCanvas = canvas.createCanvas(1000, 1000); - const circleCtx = circleCanvas.getContext('2d'); + if (this.theme == 'classic') { + const progressBarWidth = (validatedProgress / 100) * 670; + const circleX = progressBarWidth + 60; + + const progressBarCanvas = canvas.createCanvas(670, 25); + const progressBarCtx = progressBarCanvas.getContext('2d'); + const cornerRadius = 10; + progressBarCtx.beginPath(); + progressBarCtx.moveTo(cornerRadius, 0); + progressBarCtx.lineTo(670 - cornerRadius, 0); + progressBarCtx.arc(670 - cornerRadius, cornerRadius, cornerRadius, 1.5 * Math.PI, 2 * Math.PI); + progressBarCtx.lineTo(670, 25 - cornerRadius); + progressBarCtx.arc(670 - cornerRadius, 25 - cornerRadius, cornerRadius, 0, 0.5 * Math.PI); + progressBarCtx.lineTo(cornerRadius, 25); + progressBarCtx.arc(cornerRadius, 25 - cornerRadius, cornerRadius, 0.5 * Math.PI, Math.PI); + progressBarCtx.lineTo(0, cornerRadius); + progressBarCtx.arc(cornerRadius, cornerRadius, cornerRadius, Math.PI, 1.5 * Math.PI); + progressBarCtx.closePath(); + progressBarCtx.fillStyle = '#ababab'; + progressBarCtx.fill(); + progressBarCtx.beginPath(); + progressBarCtx.moveTo(cornerRadius, 0); + progressBarCtx.lineTo(progressBarWidth - cornerRadius, 0); + progressBarCtx.arc(progressBarWidth - cornerRadius, cornerRadius, cornerRadius, 1.5 * Math.PI, 2 * Math.PI); + progressBarCtx.lineTo(progressBarWidth, 25); + progressBarCtx.lineTo(cornerRadius, 25); + progressBarCtx.arc(cornerRadius, 25 - cornerRadius, cornerRadius, 0.5 * Math.PI, Math.PI); + progressBarCtx.lineTo(0, cornerRadius); + progressBarCtx.arc(cornerRadius, cornerRadius, cornerRadius, Math.PI, 1.5 * Math.PI); + progressBarCtx.closePath(); + progressBarCtx.fillStyle = `#${validatedColor}`; + progressBarCtx.fill(); + + const circleCanvas = canvas.createCanvas(1000, 1000); + const circleCtx = circleCanvas.getContext('2d'); + + const circleRadius = 20; + const circleY = 97; + + circleCtx.beginPath(); + circleCtx.arc(circleX, circleY, circleRadius, 0, 2 * Math.PI); + circleCtx.fillStyle = `#${validatedColor}`; + circleCtx.fill(); + + const background = await canvas.loadImage(`https://s6.imgcdn.dev/ZDjTD.png`); + + const thumbnailCanvas = canvas.createCanvas(564, 564); + const thumbnailCtx = thumbnailCanvas.getContext('2d'); + + let thumbnailImage; + + thumbnailImage = await canvas.loadImage(this.thumbnail, { + requestOptions: { + headers: { + 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36', + } + } + }).catch(() => { + thumbnailImage = canvas.loadImage(`https://s6.imgcdn.dev/Opo4a.jpg`); + }) - const circleRadius = 20; - const circleY = 97; + const thumbnailSize = Math.min(thumbnailImage.width, thumbnailImage.height); + const thumbnailX = (thumbnailImage.width - thumbnailSize) / 2; + const thumbnailY = (thumbnailImage.height - thumbnailSize) / 2; - circleCtx.beginPath(); - circleCtx.arc(circleX, circleY, circleRadius, 0, 2 * Math.PI); - circleCtx.fillStyle = `#${validatedColor}`; - circleCtx.fill(); + const cornerRadius2 = 45; - const img = await canvas.loadImage(`${devmod ? "" : "node_modules/musicard/"}res/background.png`); + thumbnailCtx.beginPath(); + thumbnailCtx.moveTo(0 + cornerRadius2, 0); + thumbnailCtx.arcTo(thumbnailCanvas.width, 0, thumbnailCanvas.width, thumbnailCanvas.height, cornerRadius2); + thumbnailCtx.arcTo(thumbnailCanvas.width, thumbnailCanvas.height, 0, thumbnailCanvas.height, cornerRadius2); + thumbnailCtx.arcTo(0, thumbnailCanvas.height, 0, 0, cornerRadius2); + thumbnailCtx.arcTo(0, 0, thumbnailCanvas.width, 0, cornerRadius2); + thumbnailCtx.closePath(); + thumbnailCtx.clip(); - const thumbnailCanvas = canvas.createCanvas(564, 564); - const thumbnailCtx = thumbnailCanvas.getContext('2d'); + thumbnailCtx.drawImage(thumbnailImage, thumbnailX, thumbnailY, thumbnailSize, thumbnailSize, 0, 0, thumbnailCanvas.width, thumbnailCanvas.height); - let thumbnailImage; + if (this.name.length > 15) this.name = `${this.name.slice(0, 15)}...`; + if (this.author.length > 15) this.author = `${this.author.slice(0, 15)}...`; - thumbnailImage = await canvas.loadImage(thumbnailURL, { - requestOptions: { - headers: { - 'User-Agent': 'Mozilla/5.0 (compatible; Discordbot/2.0; +https://discordapp.com)', - } - } - }) - - const thumbnailSize = Math.min(thumbnailImage.width, thumbnailImage.height); - const thumbnailX = (thumbnailImage.width - thumbnailSize) / 2; - const thumbnailY = (thumbnailImage.height - thumbnailSize) / 2; - - thumbnailCtx.beginPath(); - const cornerRadius2 = 45; - thumbnailCtx.moveTo(0 + cornerRadius2, 0); - thumbnailCtx.arcTo( - thumbnailCanvas.width, - 0, - thumbnailCanvas.width, - thumbnailCanvas.height, - cornerRadius2, - ); - thumbnailCtx.arcTo( - thumbnailCanvas.width, - thumbnailCanvas.height, - 0, - thumbnailCanvas.height, - cornerRadius2, - ); - thumbnailCtx.arcTo( - 0, - thumbnailCanvas.height, - 0, - 0, - cornerRadius2, - ); - thumbnailCtx.arcTo( - 0, - 0, - thumbnailCanvas.width, - 0, - cornerRadius2, - ); - thumbnailCtx.closePath(); - thumbnailCtx.clip(); - - thumbnailCtx.drawImage( - thumbnailImage, - thumbnailX, - thumbnailY, - thumbnailSize, - thumbnailSize, - 0, - 0, - thumbnailCanvas.width, - thumbnailCanvas.height, - ); + const image = canvas.createCanvas(1280, 450); + const ctx = image.getContext('2d'); - if (this.name.length > 15) this.name = `${this.name.slice(0, 15)}...`; - if (this.author.length > 15) this.author = `${this.author.slice(0, 15)}...`; + ctx.drawImage(background, 0, 0, 1280, 450); - const image = canvas.createCanvas(1280, 450); - const ctx = image.getContext('2d'); + ctx.fillStyle = `#${validatedColor}`; + ctx.font = `75px circular-std, noto-emoji, noto-sans-jp, noto-sans, noto-sans-kr`; + ctx.fillText(this.name, 70, 120); - ctx.drawImage(img, 0, 0, 1280, 450); + ctx.fillStyle = '#b8b8b8'; + ctx.font = `50px circular-std, noto-emoji, noto-sans-jp, noto-sans, noto-sans-kr`; + ctx.fillText(this.author, 75, 190); - ctx.fillStyle = `#${validatedColor}`; - ctx.font = `75px circular-std, noto-emoji, noto-sans-jp, noto-sans, noto-sans-kr`; - ctx.fillText(this.name, 70, 120); + ctx.fillStyle = '#fff'; + ctx.font = '30px circular-std'; + ctx.fillText(validatedStartTime, 70, 410); - ctx.fillStyle = '#b8b8b8'; - ctx.font = `50px circular-std, noto-emoji, noto-sans-jp, noto-sans, noto-sans-kr`; - ctx.fillText(this.author, 75, 190); + ctx.fillStyle = '#fff'; + ctx.font = '30px circular-std'; + ctx.fillText(validatedEndTime, 680, 410); - ctx.fillStyle = '#fff'; - ctx.font = '30px circular-std'; - ctx.fillText(validatedStartTime, 70, 410); + ctx.drawImage(thumbnailCanvas, 837, 8, 435, 435); + ctx.drawImage(progressBarCanvas, 70, 340, 670, 25); + ctx.drawImage(circleCanvas, 10, 255, 1000, 1000); - ctx.fillStyle = '#fff'; - ctx.font = '30px circular-std'; - ctx.fillText(validatedEndTime, 680, 410); + return image.toBuffer('image/png'); + } else if (this.theme == 'dynamic') { + const frame = canvas.createCanvas(3264, 765); + const ctx = frame.getContext("2d"); - ctx.drawImage(thumbnailCanvas, 837, 8, 435, 435); + const background = await canvas.loadImage("https://s6.imgcdn.dev/ZDDdt.png"); + ctx.drawImage(background, 0, 0, frame.width, frame.height); - ctx.drawImage(progressBarCanvas, 70, 340, 670, 25); + const thumbnailCanvas = canvas.createCanvas(650, 650); + const thumbnailCtx = thumbnailCanvas.getContext('2d'); - ctx.drawImage(circleCanvas, 10, 255, 1000, 1000); + let thumbnailImage; - return image.toBuffer('image/png'); + thumbnailImage = await canvas.loadImage(this.thumbnail, { + requestOptions: { + headers: { + 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36', + } + } + }).catch(() => { + thumbnailImage = canvas.loadImage(`https://s6.imgcdn.dev/Opo4a.jpg`); + }) + + const thumbnailSize = Math.min(thumbnailImage.width, thumbnailImage.height); + const thumbnailX = (thumbnailImage.width - thumbnailSize) / 2; + const thumbnailY = (thumbnailImage.height - thumbnailSize) / 2; + + const cornerRadius2 = 45; + + thumbnailCtx.beginPath(); + thumbnailCtx.moveTo(0 + cornerRadius2, 0); + thumbnailCtx.arcTo(thumbnailCanvas.width, 0, thumbnailCanvas.width, thumbnailCanvas.height, cornerRadius2); + thumbnailCtx.arcTo(thumbnailCanvas.width, thumbnailCanvas.height, 0, thumbnailCanvas.height, cornerRadius2); + thumbnailCtx.arcTo(0, thumbnailCanvas.height, 0, 0, cornerRadius2); + thumbnailCtx.arcTo(0, 0, thumbnailCanvas.width, 0, cornerRadius2); + thumbnailCtx.closePath(); + thumbnailCtx.clip(); + + thumbnailCtx.drawImage(thumbnailImage, thumbnailX, thumbnailY, thumbnailSize, thumbnailSize, 0, 0, thumbnailCanvas.width, thumbnailCanvas.height); + + ctx.save(); + ctx.beginPath(); + ctx.arc(400, 382.5, 300, 0, Math.PI * 2, true); + ctx.closePath(); + ctx.clip(); + ctx.drawImage(thumbnailCanvas, 75, 60, 650, 650); + ctx.restore(); + + ctx.font = "bold 150px circular-std, noto-emoji, noto-sans-jp, noto-sans, noto-sans-kr"; + ctx.fillStyle = `#${validatedColor}`; + ctx.fillText(this.name, 800, 350); + + ctx.font = "bold 100px circular-std, noto-emoji, noto-sans-jp, noto-sans, noto-sans-kr"; + ctx.fillStyle = "#787878"; + ctx.fillText(this.author, 800, 500); + + ctx.beginPath(); + ctx.arc(2890, 382.5, 200, 0, Math.PI * 2, true); + ctx.closePath(); + ctx.lineWidth = 40; + ctx.strokeStyle = "#242323"; + ctx.stroke(); + + const progress = validatedProgress; + const angle = (progress / 100) * Math.PI * 2; + + ctx.beginPath(); + ctx.arc(2890, 382.5, 200, -Math.PI / 2, -Math.PI / 2 + angle, false); + ctx.lineWidth = 40; + ctx.strokeStyle = `#${validatedColor}`; + ctx.stroke(); + + return frame.toBuffer("image/png"); + } else { + throw new Error('Invalid theme parameter, must be "classic" or "dynamic"'); + } } } diff --git a/example/musicCard.png b/example/musicCard.png index 649c8bd..922a11d 100644 Binary files a/example/musicCard.png and b/example/musicCard.png differ diff --git a/example/test.js b/example/test.js index 63f6859..c3ec128 100644 --- a/example/test.js +++ b/example/test.js @@ -2,21 +2,19 @@ const { musicCard } = require("musicard"); const fs = require("fs"); - // Create a new music card const card = new musicCard() - .setName("Paradise") - .setAuthor("By Alan Walker") - .setColor("auto") // or hex color without # (default: auto) (auto: dominant color from thumbnail) + .setName("Bad Habits") + .setAuthor("By Ed Sheeran") + .setColor("auto") + .setTheme("dynamic") .setBrightness(50) - .setThumbnail("https://i0.wp.com/is4-ssl.mzstatic.com/image/thumb/Music115/v4/20/6a/38/206a382f-da9e-0a6c-81a7-8db2397b6438/886449597628.jpg/600x600bb-60.jpg") - .setProgress(0) + .setThumbnail("https://static.qobuz.com/images/covers/ga/ua/rmk2cpqliuaga_600.jpg") + .setProgress(10) .setStartTime("0:00") .setEndTime("3:00") - // Build the card const cardBuffer = await card.build(); - // Write the card to a file fs.writeFileSync(`musicCard.png`, cardBuffer); console.log("Done!"); })() \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 31a82b3..e65895f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "musicard", - "version": "1.4.2", + "version": "1.5.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "musicard", - "version": "1.4.2", + "version": "1.5.0", "license": "MIT", "dependencies": { "@napi-rs/canvas": "^0.1.44", @@ -1387,4 +1387,4 @@ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" } } -} +} \ No newline at end of file diff --git a/package.json b/package.json index 81e0a01..273f917 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "musicard", - "version": "1.4.3", + "version": "1.5.0", "description": "Experience your Discord bot's music in a visual format.", "main": "build/index.js", "types": "build/index.d.ts", @@ -41,4 +41,4 @@ "bugs": { "url": "https://github.com/A3PIRE/musicard/issues" } -} +} \ No newline at end of file diff --git a/readme.md b/readme.md index fffe62d..b3c6996 100644 --- a/readme.md +++ b/readme.md @@ -1,47 +1,44 @@ -![enter image description here](https://raw.githubusercontent.com/A3PIRE/musicard/main/assets/musicard.jpg) -# About -**Musicard** is a lightweight and futuristic music card library designed for Discord bots. - -- Fully Customizable -- Lightweight -- High Quality Assets -- Auto Color Detection (from thumbnail) -- Brightness Control -- Multiple Fonts Support - -# Installation +# __About__ +**Musicard** is a futuristic music card library designed for Discord bots. + +# __Installation__ ``` npm install musicard ``` -# Example +# __Example__ This example code will generate a music card image and save it. ```js (async () => { const { musicCard } = require("musicard"); const fs = require("fs"); - // Create a new music card const card = new musicCard() - .setName("Paradise") - .setAuthor("By Alan Walker") - .setColor("auto") // or hex color without # (default: auto) (auto: dominant color from thumbnail) + .setName("Bad Habits") + .setAuthor("By Ed Sheeran") + .setColor("auto") + .setTheme("dynamic") .setBrightness(50) - .setThumbnail("https://i0.wp.com/is4-ssl.mzstatic.com/image/thumb/Music115/v4/20/6a/38/206a382f-da9e-0a6c-81a7-8db2397b6438/886449597628.jpg/600x600bb-60.jpg") - .setProgress(0) + .setThumbnail("https://static.qobuz.com/images/covers/ga/ua/rmk2cpqliuaga_600.jpg") + .setProgress(10) .setStartTime("0:00") .setEndTime("3:00") - // Build the card const cardBuffer = await card.build(); - // Write the card to a file - fs.writeFileSync(`musicCard.png`, cardBuffer); + fs.writeFileSync(`musicard.png`, cardBuffer); console.log("Done!"); })() ``` -**Output** : musicCard.png -![output](https://raw.githubusercontent.com/A3PIRE/musicard/main/assets/example.png) + +# __Output__ +This is the **classic** output of musicard. +![classic](https://s6.imgcdn.dev/ZDw99.png) + +This is the **dynamic** output of musicard. +![dynamic](https://s6.imgcdn.dev/ZD6Jy.png) # Projects -We will create projects soon, but if you want your project here using **Musicard**, join our [Discord](https://discord.gg/TvjrWtEuyP) server and contact us. \ No newline at end of file +| Sr. | Name | Platform | +|:-----:|:--------------------------:|:----------:| +| **1** | [Riffy Music Bot (Official)](https://github.com/riffy-team/riffy-music-bot) | discord.js | \ No newline at end of file diff --git a/res/background.png b/res/background.png deleted file mode 100644 index 0963e49..0000000 Binary files a/res/background.png and /dev/null differ diff --git a/res/noimage.jpg b/res/noimage.jpg deleted file mode 100644 index 7b179cf..0000000 Binary files a/res/noimage.jpg and /dev/null differ