Let's Build: Musikkarten-Generator mit Transloadit
Im heutigen Beitrag geht es Schritt für Schritt darum, wie Sie ein Template erstellen, das eine Musikkarte zum Teilen erzeugt, mit der Sie Ihre Lieblingssongs in sozialen Netzwerken posten können.
Wir verwenden die unten aufgeführten Robots und binden anschließend alles in einem einfachen Programm zusammen, das unser Node.js SDK nutzt.
Unser Template
Das Template unten wirkt vielleicht unhandlich, deshalb zerlege ich es in überschaubarere Teile und gehe jedes Stück einzeln durch.
Speichern Sie dieses Template in Ihrer Transloadit-Konsole und merken Sie sich die Template ID für die spätere Verwendung in dieser Demonstration.
{
"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"
}
}
}
Unser Hintergrund
Zuerst importieren wir mit dem Robot /http/import den Hintergrund unserer Musikkarte. Er ist lediglich ein einfacher zweifarbiger Rahmen mit dem Transloadit-Logo, über den wir unsere weiteren Elemente legen können.
Die Wellenform
Anschließend erstellen wir mit unseren Robots /audio/waveform und
/image/resize ein Wellenform-Bild mit transparentem Hintergrund, das wir
dann als Wasserzeichen über unseren schlichten Hintergrund legen. Um die Wellenform auf unserem
Template an der gewünschten Stelle zu positionieren, verwenden wir die
Parameter watermark_y_offset und watermark_position.
Coverbild und Künstler hinzufügen
Jetzt müssen wir nur noch die Größe des hochgeladenen Coverbilds ändern und es als Wasserzeichen über das Ergebnis aus dem vorherigen Step legen. Außerdem fügen wir am unteren Rand der Karte einen Text mit dem Namen des Künstlers ein. Das erreichen wir mit einem Text-Wasserzeichen und dem Wert eines Formularfelds.
Wir verwenden die Strategie fillcrop, damit das Coverbild das gewünschte Quadrat auf unserer Musikkarte ausfüllt.
Auch hier sind die Parameter watermark_y_offset und y_offset hilfreich und sorgen dafür, dass
alles korrekt auf unserer Karte positioniert ist.
Mit der Musik zusammenführen
In unserem letzten Step nutzen wir den Robot /video/merge,
um unser Standbild mit Musik zu einem abspielbaren Video zusammenzuführen. Für die Parameter
height und width verwenden wir Assembly Variables, damit die Abmessungen
des Videos mit denen des Originalbilds übereinstimmen.
Code
Nachdem das Template erklärt ist, erstellen wir nun mit dem folgenden Programm eine Assembly, wobei wir sicherstellen, dass ein Eingabebild und eine Audiodatei in unserem Arbeitsverzeichnis liegen:
Das Upload-Feld file1 enthält das Coverbild und file2 enthält die Musik. Das Template wählt
diese Felder explizit aus, damit eine Eingabe nicht versehentlich in der falschen Rolle verwendet
wird. Führen Sie dieses Programm auf einem vertrauenswürdigen Server oder Ihrem eigenen Computer
aus; geben Sie Ihr Auth Secret niemals in Browser-Code preis. Verwenden Sie Node.js 20 oder neuer
und speichern Sie es als music-card.mjs, um ES-Module zu aktivieren.
// 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
})
Um das Skript auszuführen, verwenden Sie die folgenden Befehle:
# 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
Nach einigen Sekunden gibt das Skript Folgendes aus:
Here is your final result: YOUR_RESULT_URL
Und wenn wir unsere Ergebnis-URL öffnen, sehen Sie tatsächlich das folgende Ergebnis:
Zum Abschluss
Mehr ist nicht nötig! Ich hoffe, Sie hatten Spaß und haben dabei ein paar Dinge gelernt. Wenn Sie Fragen haben, wenden Sie sich bitte an unseren Support; wir helfen Ihnen gerne weiter. Halten Sie außerdem Ausschau nach künftigen Let's Build-Ausgaben, in denen wir weiterhin Projekte wie dieses veröffentlichen 😉