Criando visualizações de áudio envolventes com a Transloadit

Joseph Grabski

Líder de conteúdo · Rochester, Reino Unido · Mostrar biografia

Criadores digitais estão sempre buscando novas formas de engajar o público. Com o conteúdo em áudio voltando a crescer, também aumenta a demanda por ferramentas que melhorem a experiência audiovisual. Inspirados pelo Spearhead⁠, decidimos tentar gerar automaticamente uma forma de onda em movimento por conta própria. Seja você podcaster, músico ou criador de conteúdo, este guia vai ajudar você a transformar seu áudio em uma experiência visual cativante, elevando sua estratégia de conteúdo.

Template

Sem mais delongas, vamos ao 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
    }
  }
}

Provavelmente é muita coisa para absorver de uma vez, então vamos destrinchar e analisar cada Step separadamente.

Antes de tudo, queremos converter nosso áudio em uma imagem de forma de onda. Felizmente, podemos usar nosso Robot /audio/waveform para criar, a partir do clipe de áudio, uma imagem da forma de onda com 8000 px de largura. Com essa largura, podemos deslizar um visor virtual ao longo da imagem, criando a ilusão de que a forma de onda se move acompanhando as palavras faladas.

Em seguida, o Robot /video/merge adiciona o áudio original a essa imagem, produzindo um vídeo.

Agora é hora de colocar nosso Robot /video/encode para trabalhar. Usando parâmetros personalizados do FFmpeg, recortamos a janela para ter apenas 800 px de largura, mantendo a altura original. Depois, definimos a posição x dessa área de visualização como a largura da imagem completa menos a largura da área de visualização, multiplicada pelo nosso parâmetro de tempo t dividido pela duração total do vídeo. O parâmetro t é o timestamp atual do vídeo, o que significa que, no início do vídeo, a posição x será 0, aumentando aos poucos até 7200 (já que esse valor é 8000 px - 800 px).

Ufa! Foi bastante coisa. Para fechar nosso Template, usamos dois Robots intimamente relacionados. O Robot /speech/transcribe gera um arquivo de legendas para nós, que depois é passado ao Robot /video/subtitle.

Resultados

Vamos dar uma olhada nos resultados que nosso Template produziu.

O resultado de passar um arquivo de exemplo pelo nosso Template

Do início ao fim, nossa Assembly levou cerca de dez segundos no total. Bem impressionante!

Por hoje é só. Se você acompanhou este guia e conseguiu resultados legais, conte para a gente no Twitter⁠. Sempre adoramos ver as formas criativas que as pessoas encontram para usar a Transloadit. Se você procura outras maneiras de gerar formas de onda de áudio e visualizá-las, confira esta demonstração EN (English)!