Ratgeber · Grundlagen & Praxis
MP3 zu Video für Social-Media: TikTok, Reels und Shorts richtig exportieren
TikTok, Instagram Reels, YouTube Shorts und Facebook Reels haben jeweils eigene Empfehlungen für Auflösung, Seitenverhältnis und Codec. Wer ein Audio-Visualizer-Video für mehrere Plattformen produziert, sollte die wichtigsten Specs kennen, weil falsche Settings entweder gestaucht, beschnitten oder reduziert dargestellt werden. Dieser Ratgeber zeigt die aktuell empfohlenen Settings und welche der Browser-Export direkt liefern kann.
Specs der vier wichtigsten Plattformen
Jede Plattform hat eigene technische Anforderungen. Wer einmalig produziert und auf mehreren Plattformen postet, sollte die strengsten Anforderungen wählen.
| Plattform | Auflösung | Seitenverhältnis | Max-Länge | Empfohlener Codec |
|---|---|---|---|---|
| TikTok | 1080x1920 | 9:16 | 10 Minuten | H.264 (MP4) |
| Instagram Reels | 1080x1920 | 9:16 | 90 Sekunden | H.264 (MP4) |
| YouTube Shorts | 1080x1920 | 9:16 | 60 Sekunden | H.264 (MP4) |
| Facebook Reels | 1080x1920 | 9:16 | 90 Sekunden | H.264 (MP4) |
| Instagram Feed | 1080x1080 | 1:1 | 60 Sekunden | H.264 (MP4) |
| YouTube regulär | 1920x1080 | 16:9 | 12 Stunden | H.264 (MP4) |
Die Convergenz ist klar: 1080p, 9:16, H.264. Wer einmal mit diesen Settings exportiert, hat eine Datei, die auf TikTok, Reels und Shorts gleichermaßen funktioniert.
Was der Browser-Export liefert
Der Browser-MediaRecorder, der hinter dem Export auf audio-visualizer.de steckt, erstellt eine WebM-Datei (VP9-Codec für Video, Opus oder Vorbis für Audio). Diese Datei lässt sich direkt auf TikTok, Reels und Shorts hochladen, weil alle drei Plattformen WebM akzeptieren und intern zu H.264 transkodieren.
Vorteile WebM-Export: schnell (kein zusätzliches Transkodieren im Browser), kleine Dateigröße bei guter Qualität (VP9 ist effizient), keine Patent-Lizenz-Fragen.
Nachteile WebM-Export: schlechtere Kompatibilität außerhalb der großen Plattformen (WhatsApp, manche E-Mail-Clients, manche ältere Geräte können WebM nicht abspielen), nicht alle Plattformen behandeln WebM gleich (Twitter/X verwerfen WebM oft).
Wer das Video auch direkt teilen will (per WhatsApp, E-Mail, USB-Stick an Bekannte), sollte MP4 wählen. Der MP4-Export aus dem Browser läuft über FFmpeg.wasm, ein in WebAssembly portiertes FFmpeg, das clientseitig WebM zu MP4 (H.264) transkodiert. Das kostet 5 bis 30 Sekunden Wartezeit je nach Videolänge.
Auflösung und Skalierung
Die meisten Browser rendern Canvas-Elemente in Display-Pixel-Auflösung, also genau das, was du auf dem Bildschirm siehst. Für ein Export-Video brauchst du aber meist eine höhere Auflösung als das, was du im Browser siehst.
Lösung: das Canvas-Element wird beim Export mit einer höheren width/height-Attributs als CSS-Größe gerendert. Wenn das Canvas im Browser 540x960 angezeigt wird (eine pragmatische Vorschau-Größe), wird beim Export der Canvas-Buffer auf 1080x1920 hochgesetzt, das devicePixelRatio entsprechend angepasst. Das Resultat ist eine MP4-Datei in voller 1080p-Auflösung, auch wenn du im Browser nur die kleinere Vorschau gesehen hast.
Wer 4K-Export will (2160x3840 für höhere Qualität auf 4K-TVs), kann das auf modernen GPUs schaffen, aber bei aufwendigen Visualisierungen (Particles, WebGL-Shader) wird die Browser-Performance zum Limit. Realistisch sind 1080p-Exporte ohne Probleme, 4K nur mit einfacheren Visualisierungs-Modi (Wellenform, einfaches Spektrum).
Audio-Bitrate und Audio-Qualität
Beim Export wird die geladene Audio-Datei mit dem Visualisierungs-Video kombiniert. Die Audio-Qualität hängt von zwei Faktoren ab: erstens der Bitrate der Quell-MP3 (geladene Datei), zweitens der Re-Encode-Bitrate im Export.
Wenn deine Quell-MP3 mit 320 kbit/s codiert ist und du im Export 192 kbit/s nutzt, verlierst du Audio-Qualität durch unnötige Re-Compression. Wenn die Quell-MP3 mit 128 kbit/s codiert ist, bringt ein 320-kbit/s-Export nichts, weil die ursprüngliche Qualität schon limitiert war.
Pragmatisch: 192 kbit/s AAC für die meisten Anwendungen, 256-320 kbit/s wenn die Quell-Datei in hoher Qualität vorliegt und die Plattform die höhere Bitrate beibehält. TikTok komprimiert Audio nach dem Upload auf etwa 128 kbit/s, deshalb sind höhere Bitraten beim Upload eher Reserve als Endqualität.
Cover-Bild oder reine Visualisierung
Für Audiogramme (Podcast-Snippets, Hörbuch-Promotion) wird oft ein statisches Cover-Bild über der Visualisierung gelegt. Das funktioniert im Browser-Export durch ein zusätzliches Image-Layer, das in jedem Frame über die Canvas-Visualisierung gerendert wird.
Layout-Variante 1: Cover oben halb des Hochformat-Videos (typisch 1080x960), Visualisierung unten halb. Wirkt klassisch und ist seit den frühen NPR-Audiogrammen Standard.
Layout-Variante 2: Cover als Hintergrund (gefüllt auf 1080x1920, oft mit Blur-Effekt), Visualisierung als Overlay in der Mitte. Wirkt moderner und vollflächiger.
Layout-Variante 3: Cover oben als Profil-Bild rund, Titel-Text in der Mitte, Visualisierung unten. Bewährtes Format für gesprochene Inhalte (Podcast, Hörbuch).
Häufige Fehler beim Plattform-Upload
Falsches Seitenverhältnis: ein 16:9-Querformat-Video auf TikTok oder Reels hochladen produziert entweder schwarze Balken oben/unten (TikTok) oder einen automatischen Crop, der die Visualisierung beschneidet. Immer in 9:16 produzieren, wenn das Ziel TikTok/Reels/Shorts ist.
Zu lange Videos: ein 70-Sekunden-Clip auf YouTube Shorts wird abgeschnitten (Shorts-Limit ist 60 Sekunden). Wer plattformübergreifend produziert, plant unter 60 Sekunden.
Audio zu leise: TikTok normalisiert Audio nach dem Upload auf etwa -14 LUFS (Loudness Units relative to Full Scale). Wenn deine Quell-Datei viel leiser ist, klingt sie nach dem Upload entweder noch leiser oder TikTok pumpt zu stark mit Auto-Gain. Idealer Upload-Pegel: -14 bis -18 LUFS.
Plattform-Watermark im Visualizer: wenn du das Video erst auf TikTok hochlädst und dann zu Instagram herunterlädst, hat TikTok ein Watermark eingefügt, das Instagram in der Discovery abstraft. Lösung: jede Plattform bekommt eine direkte Upload-Version aus dem ursprünglichen Export, nicht einen Re-Download.
Worauf das Endergebnis wirklich ankommt
Ein Audio-Visualizer-Video für Social-Media ist 30 Sekunden Aufmerksamkeit. Die meisten Zuschauer entscheiden in den ersten 2 Sekunden, ob sie weiter schauen. Die technischen Specs sind das Fundament (richtiges Seitenverhältnis, ausreichende Bitrate, kompatibles Format), aber das Visual selbst entscheidet, ob jemand zu Ende schaut. Wer die Specs einmal richtig hat, kann seine Energie auf die ersten 2 Sekunden konzentrieren, auf den Hook, der den Daumen stoppt.
FAQ
Häufige Fragen
Welches Seitenverhältnis für TikTok, Reels, Shorts?
Alle drei Plattformen wollen 9:16 hochkant. TikTok 1080x1920, Instagram Reels 1080x1920, YouTube Shorts 1080x1920 oder 1080x1350 (wenn auch im Feed angezeigt). Querformat-Videos (16:9) werden auf allen drei Plattformen mit schwarzen Balken oben und unten dargestellt oder beschnitten, was visuell schlecht aussieht. Wer für eine Plattform produziert, exportiert direkt im 9:16-Format.
Welcher Codec wird empfohlen?
H.264 (MP4) ist Industrie-Standard und funktioniert auf allen Plattformen problemlos. Die meisten Browser-Exporte liefern zunächst WebM (VP9-Codec), was auf TikTok und Reels problemlos hochgeladen werden kann, weil die Plattformen intern in H.264 transkodieren. Für maximale Kompatibilität (z.B. wenn die Datei zusätzlich per WhatsApp geteilt werden soll) ist H.264 die sichere Wahl. FFmpeg.wasm im Browser kann WebM zu MP4 transkodieren, kostet aber Wartezeit.
Wie lang darf das Video sein?
TikTok bis 10 Minuten, Instagram Reels bis 90 Sekunden, YouTube Shorts bis 60 Sekunden, Facebook Reels bis 90 Sekunden. Für maximale plattformübergreifende Nutzung also unter 60 Sekunden bleiben. Die meisten Audio-Visualizer-Clips für Promotion sind ohnehin 15-30 Sekunden lang, weil die Engagement-Rate jenseits davon stark fällt (TikTok-eigene Studien 2023 zeigen, dass die Watch-Through-Rate bei 30+ Sekunden um 40-50 Prozent niedriger liegt).
Welche Bitrate sollte das Video haben?
Für 1080p Hochformat (1080x1920) 8-12 Mbit/s Video-Bitrate und 192-320 kbit/s Audio-Bitrate. TikTok komprimiert nach dem Upload auf etwa 5-8 Mbit/s, deshalb lohnen sich beim Upload höhere Bitraten als Reserve. Auf Reels und Shorts ähnliche Re-Encode-Logik. Wer mit 4-5 Mbit/s exportiert, sieht nach Plattform-Re-Encode Artefakte, weil der Encoder schon zweimal komprimiert hat.
Wie bekomme ich Audio und Video synchron?
Im Browser-Export ist das automatisch der Fall, weil die Audio-Datei und die Canvas-Animation aus derselben AudioContext-Timeline laufen. Probleme gibts nur bei externer Konvertierung (z.B. wenn das exportierte WebM später in einem anderen Tool zu MP4 umgewandelt wird), dort kann Audio-Drift entstehen, vor allem bei längeren Clips. Lösung: direkten MP4-Export aus dem Browser nutzen, ohne zwischengeschaltete Konvertierung.
Quellen