Let's Build: generador de tarjetas musicales con Transloadit
La publicación de hoy trata sobre el proceso paso a paso de crear un Template para crear una tarjeta musical que puedes compartir y usar para publicar tus canciones favoritas en redes sociales.
Vamos a usar los Robots que se listan a continuación, antes de juntarlo todo para usarlo con un programa sencillo que emplea nuestro SDK de Node.js.
Nuestro Template
El Template que aparece abajo puede parecer difícil de manejar, así que lo dividiré en fragmentos más manejables y repasaré cada pieza por separado.
Adelante, guarda este Template en tu Transloadit Console y toma nota del Template ID para usarlo más adelante en esta demostración.
{
"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"
},
"resize_art": {
"use": { "steps": ":original", "fields": ["file1"] },
"height": 400,
"width": 400,
"resize_strategy": "fillcrop",
"robot": "/image/resize",
"imagemagick_stack": "v3"
},
"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"
},
"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"
}
}
}
Nuestro fondo
Primero, usamos el Robot /http/import para importar el fondo de nuestra tarjeta musical. Es solo un marco sencillo de dos tonos con el logo de Transloadit, sobre el que podemos superponer nuestros demás elementos.
La forma de onda
Después, con nuestros Robots /audio/waveform y
/image/resize, creamos una imagen de forma de onda con fondo
transparente para luego superponerla como marca de agua sobre nuestro fondo liso. Para colocar la
forma de onda donde queremos en nuestro Template, usamos los parámetros watermark_y_offset y
watermark_position.
Añadir la carátula y el artista
Ahora solo queda redimensionar la carátula que subimos y superponerla como marca de agua sobre el resultado del Step anterior. También incluiremos un texto con el nombre del artista en la parte inferior de la tarjeta. Lo logramos mediante una marca de agua de texto, junto con el valor de un campo del formulario.
Empleamos la estrategia fillcrop para asegurarnos de que la carátula llene el cuadrado deseado en
nuestra tarjeta musical. De nuevo, los parámetros watermark_y_offset y y_offset resultan muy útiles, ya que
garantizan que todo quede bien colocado en nuestra tarjeta.
Combinar con la música
Nuestro Step final usará el Robot /video/merge
para combinar nuestro fotograma fijo con música y crear un video reproducible. Usaremos
Assembly Variables para los parámetros height y width, de modo que las dimensiones
del video coincidan con las de la imagen original.
Código
Con el Template ya explicado, creemos ahora una Assembly con el programa de abajo, asegurándonos de tener una imagen de entrada y un archivo de audio en nuestro directorio de trabajo:
El campo de subida file1 contiene la carátula y file2 contiene la música. El Template selecciona
esos campos explícitamente para que una entrada no pueda usarse por accidente en el rol equivocado.
Ejecuta este programa en un servidor de confianza o en tu propia computadora; nunca expongas tu Auth
Secret en código de navegador. Usa Node.js 20 o una versión más reciente y guárdalo como music-card.mjs para habilitar los módulos 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
})
Para ejecutar el script, usa los siguientes comandos:
# 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
Tras unos segundos, muestra lo siguiente:
Here is your final result: YOUR_RESULT_URL
Y, efectivamente, si abrimos la URL de nuestro resultado, verás lo siguiente:
Para terminar
¡Eso es todo! Espero que lo hayas pasado bien y hayas aprendido algunas cosas por el camino. Si tienes alguna pregunta, contáctanos a través de soporte; estaremos encantados de ayudarte. Además, mantente atento a futuras ediciones de Let's Build, donde seguiremos publicando proyectos como este 😉