Créer des visualisations audio attrayantes avec Transloadit
Les créateurs numériques cherchent sans cesse de nouvelles façons de captiver leur public. Avec le retour en force des contenus audio, la demande d’outils capables d’enrichir l’expérience audiovisuelle grandit aussi. Inspirés par Spearhead, nous avons décidé d’essayer de générer nous-mêmes automatiquement une forme d’onde animée. Que vous soyez podcasteur, musicien ou créateur de contenu, ce guide vous aidera à transformer votre audio en une expérience visuelle captivante et à valoriser votre stratégie de contenu.
Template
Sans perdre le rythme, passons directement au 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
}
}
}
C’est sans doute beaucoup à assimiler d’un coup. Décomposons donc le tout pour examiner chaque Step séparément.
Tout d’abord, nous voulons convertir notre audio en image de forme d’onde. Heureusement, notre Robot /audio/waveform nous permet de créer, à partir de l’extrait audio, une image de la forme d’onde de 8000 px de large. Avec une telle largeur, nous pouvons faire défiler un viseur virtuel sur toute la longueur de l’image, ce qui donne l’illusion d’une forme d’onde qui bouge au rythme des paroles.
Ensuite, le Robot /video/merge ajoute l’audio d’origine à cette image pour produire une vidéo.
Il est maintenant temps de mettre notre Robot /video/encode au
travail. À l’aide de paramètres FFmpeg personnalisés, nous recadrons la fenêtre pour qu’elle ne
fasse que 800 px de large, tout en conservant la hauteur d’origine. Nous définissons ensuite la
position x de cette fenêtre d’affichage comme la largeur de l’image complète, moins la largeur de la
fenêtre d’affichage, multipliée par notre paramètre temporel t divisé par la durée totale de la vidéo.
Le paramètre t correspond à l’horodatage actuel de la vidéo : au début de la vidéo, la
position x vaut donc 0, puis augmente lentement jusqu’à 7200 (puisque 8000 px - 800 px).
Ouf ! Cela faisait beaucoup d’informations. Pour terminer notre Template, nous utilisons deux Robots étroitement liés. Le Robot /speech/transcribe génère pour nous un fichier de sous-titres, qui est ensuite transmis au Robot /video/subtitle.
Résultats
Voyons les résultats produits par notre Template.
Le résultat obtenu en passant un fichier d’exemple dans notre Template
Du début à la fin, notre Assembly a pris environ dix secondes au total. Plutôt impressionnant !
C’est tout pour le blog d’aujourd’hui. Si vous avez suivi ce guide et obtenu des résultats sympas, n’hésitez pas à nous le faire savoir sur Twitter. Nous adorons toujours découvrir les façons créatives dont les gens utilisent Transloadit. Si vous cherchez d’autres façons de générer des formes d’onde audio et de les visualiser, consultez cette démo (English) !