Let’s Build : générateur de cartes musicales avec Transloadit
L’article d’aujourd’hui détaille, étape par étape, la création d’un Template qui produit une carte musicale partageable, que vous pourrez utiliser pour publier vos chansons préférées sur les réseaux sociaux.
Nous utiliserons les Robots présentés ci-dessous, avant d’assembler le tout dans un programme simple qui s’appuie sur notre SDK Node.js.
Notre Template
Le Template ci-dessous peut sembler complexe ; je vais donc le découper en parties plus faciles à appréhender et les passer en revue une par une.
Enregistrez ce Template dans votre console Transloadit et notez l’ID du Template, qui servira plus loin dans cette démonstration.
{
"steps": {
":original": {
"robot": "/upload/handle"
},
"import_bg": {
"robot": "/http/import",
"url": "https://transloadit.com/assets/images/blog/2022-04-template.jpg"
},
"waveformed": {
"robot": "/audio/waveform",
"use": { "steps": ":original", "fields": ["file2"] },
"result": true,
"width": 400,
"height": 200,
"background_color": "00000000",
"outer_color": "292C36ff",
"center_color": "292C36ff",
"format": "image"
},
"add_waveform": {
"use": {
"steps": [
{
"name": "waveformed",
"as": "watermark"
},
{
"name": "import_bg",
"as": "base"
}
]
},
"robot": "/image/resize",
"watermark_size": "80%",
"watermark_y_offset": 500,
"watermark_position": "center",
"imagemagick_stack": "v3.0.1"
},
"resize_art": {
"use": { "steps": ":original", "fields": ["file1"] },
"height": 400,
"width": 400,
"resize_strategy": "fillcrop",
"robot": "/image/resize",
"imagemagick_stack": "v3.0.1"
},
"watermark": {
"use": {
"steps": [
{
"name": "resize_art",
"as": "watermark"
},
{
"name": "add_waveform",
"as": "base"
}
]
},
"robot": "/image/resize",
"watermark_size": "60%",
"watermark_y_offset": -200,
"watermark_position": "center",
"text": [
{
"text": "${fields.artist}",
"size": 84,
"font": "Ubuntu",
"color": "#292C36",
"valign": "bottom",
"align": "center",
"x_offset": 0,
"y_offset": -250
}
],
"imagemagick_stack": "v3.0.1"
},
"merged": {
"robot": "/video/merge",
"preset": "ipad-high",
"result": true,
"width": "${file.meta.width}",
"height": "${file.meta.height}",
"use": {
"steps": [
{
"name": ":original",
"as": "audio",
"fields": "file2"
},
{
"name": "watermark",
"as": "image"
}
],
"bundle_steps": true
},
"ffmpeg_stack": "v7"
}
}
}
Notre arrière-plan
Nous utilisons d’abord le Robot /http/import pour importer l’arrière-plan de notre carte musicale. Il s’agit d’un simple cadre bicolore orné du logo Transloadit, sur lequel nous pouvons superposer nos autres éléments.
La forme d’onde
Ensuite, à l’aide de nos Robots /audio/waveform et
/image/resize, nous créons une image de forme d’onde sur fond transparent, que nous
appliquons ensuite en filigrane sur notre arrière-plan uni. Pour placer la forme d’onde à l’endroit
voulu sur notre Template, nous utilisons les paramètres
watermark_y_offset et watermark_position.
Ajouter la pochette et l’artiste
Il ne reste plus qu’à redimensionner la pochette que nous avons téléversée et à l’appliquer en filigrane sur le résultat du Step précédent. Nous ajouterons aussi un texte indiquant le nom de l’artiste en bas de la carte. Pour cela, nous utilisons un filigrane textuel ainsi que la valeur d’un champ de formulaire.
Nous employons la stratégie fillcrop pour que la pochette remplisse le carré prévu sur notre carte
musicale. Là encore, les paramètres watermark_y_offset et y_offset s’avèrent utiles
pour que tout soit correctement positionné sur notre carte.
Fusionner avec la musique
Notre dernier Step utilisera le Robot
/video/merge pour combiner notre image fixe avec la musique et obtenir une vidéo
lisible. Nous utiliserons des Assembly Variables pour les paramètres height et
width, afin que les dimensions de la vidéo correspondent à celles de l’image d’origine.
Code
Maintenant que le Template est expliqué, créons une Assembly à l’aide du programme ci-dessous, en vérifiant que notre répertoire de travail contient bien une image et un fichier audio en entrée :
Le champ de téléversement file1 contient la pochette, et le champ file2 contient la
musique. Le Template sélectionne explicitement ces champs, de sorte qu’un fichier d’entrée ne puisse
pas être utilisé par erreur dans le mauvais rôle. Exécutez ce programme sur un serveur de confiance
ou sur votre propre ordinateur ; n’exposez jamais votre Auth Secret dans du code exécuté par le
navigateur. Utilisez Node.js 20 ou une version ultérieure, et enregistrez-le sous le nom
music-card.mjs pour activer les modules ES.
// yarn add transloadit@4
import { Transloadit } from 'transloadit'
;(async () => {
const transloadit = new Transloadit({
authKey: process.env.TRANSLOADIT_AUTH_KEY,
authSecret: process.env.TRANSLOADIT_SECRET_KEY,
})
const assemblyStatus = await transloadit.createAssembly({
waitForCompletion: true,
files: {
file1: process.env.ARTWORK,
file2: process.env.MUSIC,
},
params: {
template_id: 'YOUR_TEMPLATE_ID',
fields: { artist: process.env.ARTIST },
},
})
console.log(`Here is your final result: ${assemblyStatus.results.merged[0].ssl_url}`)
})().catch(() => {
console.error('Music card generation failed.')
process.exitCode = 1
})
Pour exécuter le script, utilisez les commandes suivantes :
# Use your workspace Auth Key and Auth Secret, not storage Template Credentials.
export TRANSLOADIT_AUTH_KEY='YOUR_AUTH_KEY'
export TRANSLOADIT_SECRET_KEY='YOUR_AUTH_SECRET'
export ARTIST='Cats!'
export ARTWORK=./cat.jpg
export MUSIC=./sample.mp3
node music-card.mjs
Après quelques secondes, il affiche :
Here is your final result: YOUR_RESULT_URL
Et effectivement, si nous ouvrons l’URL de notre résultat, voici ce que vous verrez :
Pour conclure
Et voilà, c’est tout ! J’espère que vous avez passé un bon moment et appris quelques petites choses en chemin. Si vous avez des questions, n’hésitez pas à contacter notre support ; nous serons ravis de vous aider. Restez également à l’affût des prochaines éditions de Let’s Build, dans lesquelles nous continuerons à publier des projets comme celui-ci 😉