Let's Build: gerador de cartões musicais com a Transloadit
O post de hoje mostra, passo a passo, como criar um Template que gera um cartão musical compartilhável, que você pode usar para postar suas músicas favoritas nas redes sociais.
Vamos usar os Robots listados abaixo e, no final, juntar tudo em um programa simples com o nosso SDK para Node.js.
Nosso Template
O Template abaixo pode parecer complicado, então vou dividi-lo em partes mais fáceis de entender e explicar cada uma delas separadamente.
Salve este Template no seu console da Transloadit e anote o Template ID para usá-lo mais adiante nesta demonstração.
{
"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"
}
}
}
Nosso fundo
Primeiro, usamos o Robot /http/import para importar o fundo do nosso cartão musical. É apenas um quadro simples em dois tons com o logotipo da Transloadit, sobre o qual podemos sobrepor os outros elementos.
A forma de onda
Em seguida, usando os Robots /audio/waveform e
/image/resize, criamos uma imagem da forma de onda com fundo transparente para
depois aplicá-la como marca-d’água sobre o nosso fundo simples. Para posicionar a forma de onda onde
queremos no nosso Template, usamos os
parâmetros watermark_y_offset e watermark_position.
Adicionando a capa e o artista
Agora basta redimensionar a arte que enviamos e aplicá-la como marca-d’água sobre o resultado do Step anterior. Também vamos incluir um texto com o nome do artista na parte inferior do cartão. Fazemos isso com uma marca-d’água de texto, junto com o valor de um campo de formulário.
Usamos a estratégia fillcrop para garantir que a arte preencha o quadrado desejado no nosso
cartão musical. Mais uma vez, os parâmetros watermark_y_offset e
y_offset são muito úteis para garantir que tudo fique bem posicionado no cartão.
Juntando com a música
Nosso Step final usará o Robot
/video/merge para combinar o quadro estático com a música e criar um vídeo
reproduzível. Vamos usar Assembly Variables nos parâmetros
height e width para garantir que as dimensões do vídeo sejam consistentes com as da
imagem original.
Código
Com o Template explicado, vamos criar uma Assembly usando o programa abaixo, garantindo que haja uma imagem e um arquivo de áudio de entrada no nosso diretório de trabalho:
O campo de upload file1 contém a arte e file2 contém a música. O Template seleciona
esses campos explicitamente para que uma entrada não possa ser usada por engano na função errada.
Execute este programa em um servidor confiável ou no seu próprio computador; nunca exponha seu Auth
Secret em código do navegador. Use o Node.js 20 ou mais recente e salve o programa como
music-card.mjs para habilitar os 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 executar o script, use os seguintes 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
Após alguns segundos, ele exibe:
Here is your final result: YOUR_RESULT_URL
E, como esperado, ao abrir a URL do resultado, você verá o seguinte:
Concluindo
E é só isso! Espero que você tenha se divertido e aprendido algumas coisas pelo caminho. Se tiver alguma dúvida, entre em contato com o nosso suporte; teremos prazer em ajudar. E fique de olho nas próximas edições do Let's Build, em que continuaremos lançando projetos como este 😉