Ansprechende Audiovisualisierungen mit Transloadit erstellen

Joseph Grabski

Content-Leiter · Rochester, Vereinigtes Königreich · Bio anzeigen

Digitale Kreative suchen ständig nach neuen Wegen, ihr Publikum zu begeistern. Da Audio-Inhalte wieder im Aufwind sind, wächst auch die Nachfrage nach Werkzeugen, die das audiovisuelle Erlebnis verbessern. Inspiriert von Spearhead⁠, haben wir versucht, selbst automatisch eine bewegte Wellenform zu erzeugen. Ob Sie Podcaster, Musiker oder Content-Creator sind: Diese Anleitung hilft Ihnen, Ihr Audiomaterial in ein fesselndes visuelles Erlebnis zu verwandeln und Ihre Content-Strategie aufzuwerten.

Template

Ohne Umschweife geht es weiter zum Template!

{
  "steps": {
    ":original": {
      "robot": "/upload/handle"
    },
    "waveformed": {
      "robot": "/audio/waveform",
      "use": ":original",
      "result": true,
      "width": 8000,
      "height": 600,
      "background_color": "00000000",
      "outer_color": "ffffffff",
      "center_color": "ffffffff",
      "format": "image"
    },
    "merged": {
      "robot": "/video/merge",
      "use": {
        "steps": [
          {
            "name": "waveformed",
            "as": "image"
          },
          {
            "name": ":original",
            "as": "audio"
          }
        ]
      },
      "result": true,
      "ffmpeg_stack": "v5.0.0",
      "preset": "ipad-high",
      "width": "${file.meta.width}",
      "height": "${file.meta.height}"
    },
    "scroll_waveform": {
      "robot": "/video/encode",
      "use": "merged",
      "ffmpeg_stack": "v5.0.0",
      "preset": "empty",
      "ffmpeg": {
        "vf": "crop=w=800:h=(${file.meta.height}):x='(${file.meta.width}-800)*t/${file.meta.duration}':y=0",
        "t": "${file.meta.duration}"
      }
    },
    "transcribed": {
      "use": ":original",
      "robot": "/speech/transcribe",
      "provider": "aws",
      "format": "webvtt",
      "result": true
    },
    "subtitle": {
      "use": {
        "bundle_steps": true,
        "steps": [
          {
            "name": "scroll_waveform",
            "as": "video"
          },
          {
            "name": "transcribed",
            "as": "subtitles"
          }
        ]
      },
      "robot": "/video/subtitle",
      "ffmpeg_stack": "v5.0.0",
      "subtitles_type": "burned",
      "preset": "ipad-high",
      "result": true
    }
  }
}

Das ist wahrscheinlich viel auf einmal, deshalb schlüsseln wir es auf und sehen uns jeden Step einzeln an.

Zuerst wollen wir unser Audio in ein Wellenform-Bild umwandeln. Glücklicherweise können wir dafür unseren Robot /audio/waveform nutzen, um ein 8000 px breites Bild der Wellenform aus dem Audioclip zu erstellen. Diese Breite ermöglicht es uns, einen virtuellen Bildausschnitt entlang des Bildes zu bewegen und so die Illusion zu erzeugen, dass sich die Wellenform passend zu den gesprochenen Worten bewegt.

Als Nächstes fügt der Robot /video/merge diesem Bild das ursprüngliche Audio hinzu und erzeugt daraus ein Video.

Jetzt ist es Zeit, unseren Robot /video/encode einzusetzen. Mithilfe eigener FFmpeg-Parameter beschneiden wir das Fenster auf nur 800 px Breite und behalten dabei die ursprüngliche Höhe bei. Anschließend setzen wir die x-Position dieses Viewports auf die Breite des gesamten Bildes, abzüglich der Viewport-Breite, multipliziert mit unserem Zeitparameter t geteilt durch die Gesamtdauer des Videos. Der Parameter t ist der aktuelle Zeitstempel im Video. Zu Beginn des Videos ist die x-Position also 0 und steigt langsam auf 7200 an (da es sich um 8000 px - 800 px handelt).

Puh! Das war eine Menge Stoff. Um unser Template abzuschließen, setzen wir zwei eng verwandte Robots ein. Der Robot /speech/transcribe erzeugt für uns eine Untertiteldatei, die anschließend an den Robot /video/subtitle übergeben wird.

Ergebnisse

Werfen wir einen Blick auf die Ergebnisse, die unser Template erzeugt hat.

Das Ergebnis der Übergabe einer Beispieldatei an unser Template

Von Anfang bis Ende hat unsere Assembly insgesamt etwa zehn Sekunden gedauert. Ziemlich beeindruckend!

Das war's für den heutigen Blogbeitrag. Falls Sie dieser Anleitung gefolgt sind und dabei coole Ergebnisse erzielt haben, lassen Sie es uns gerne auf Twitter⁠ wissen. Wir sehen immer wieder gern, auf welche kreativen Ideen Menschen kommen, um Transloadit einzusetzen. Wenn Sie nach weiteren Möglichkeiten suchen, Audio-Wellenformen zu erzeugen und zu visualisieren, sehen Sie sich diese Demo EN (English) an!