Creación de visualizaciones de audio atractivas con Transloadit
Los creadores digitales buscan constantemente nuevas formas de conectar con su audiencia. Con el contenido de audio otra vez en auge, también crece la demanda de herramientas que puedan mejorar la experiencia audiovisual. Inspirados por Spearhead, decidimos intentar generar nosotros mismos una forma de onda en movimiento de manera automática. Ya seas podcaster, músico o creador de contenido, esta guía te ayudará a transformar tu audio en una experiencia visual cautivadora, elevando tu estrategia de contenido.
Template
Sin perder el ritmo, ¡pasemos al 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
}
}
}
Probablemente sea mucho para asimilar de una sola vez, así que vamos a desglosarlo y examinar cada Step por separado.
Antes que nada, queremos convertir nuestro audio en una imagen de forma de onda. Por suerte, podemos usar nuestro Robot /audio/waveform para crear una imagen de la forma de onda del clip de audio de 8000 px de ancho. Hacerla tan ancha significa que podemos desplazar un visor virtual a lo largo de la imagen, creando la ilusión de que la forma de onda se mueve al compás de las palabras pronunciadas.
A continuación, el Robot /video/merge añade el audio original a esta imagen y produce un video.
Ahora es momento de poner a trabajar nuestro Robot /video/encode.
Con parámetros personalizados de FFmpeg, recortamos la ventana para que tenga solo 800 px de ancho,
manteniendo la altura original. Luego fijamos la posición x de este viewport en el ancho de la imagen
completa, menos el ancho del viewport, multiplicado por nuestro parámetro de tiempo t sobre la duración total del video. El parámetro t
es la marca de tiempo actual del video, lo que significa que al comienzo del video la posición x
será 0 y aumentará lentamente hasta 7200 (ya que son 8000 px - 800 px).
¡Uf! Fue mucha información. Para cerrar nuestro Template, usamos dos Robots estrechamente relacionados. El Robot /speech/transcribe genera un archivo de subtítulos que después se pasa al Robot /video/subtitle.
Resultados
Echemos un vistazo a los resultados que produjo nuestro Template.
El resultado de pasar un archivo de ejemplo por nuestro Template
De principio a fin, nuestra Assembly tardó aproximadamente diez segundos en total. ¡Bastante impresionante!
Eso es todo por el blog de hoy. Si seguiste esta guía y obtuviste resultados interesantes, cuéntanoslo por favor en Twitter. Siempre nos encanta ver las formas creativas en que la gente usa Transloadit. Si buscas otras maneras de generar formas de onda de audio y visualizarlas, ¡echa un vistazo a esta demo (English)!