How to Make a Lyric Video in Your Browser — Complete Guide

Last updated: 2026-10-05

LyricsFlow MVMaker is a free lyric video editor that runs entirely inside your web browser. You bring a song and a timed lyrics file; the editor turns every line into animated kinetic typography and renders an MP4 on your own computer. This guide walks through the whole workflow, from an empty project to a finished video file.

What you need before you start

• An audio file — MP3, WAV, M4A or any format your browser can play.
• Timed lyrics — an .srt subtitle file or an .lrc lyric file. If you only have plain lyrics, read how to make an SRT lyrics file, or let the built-in Whisper transcription create one for you (see step 3).
• A desktop browser — a recent Chrome or Edge gives the fastest export. The editor also opens on phones and tablets, but long songs export much faster on a PC.

Step 1 — Choose the aspect ratio

When the editor opens, the welcome panel asks you to pick a canvas. You can change it later from the 16:9 / 9:16 / 1:1 switch in the header.

Text layout is recalculated for each ratio, so the same project can be exported three times — once per platform — without re-timing anything. Our article on vertical lyric videos explains what to adjust for 9:16.

Step 2 — Load your song and lyrics

1. Click 🎵 Load Audio and choose your track. The waveform and total duration appear in the timeline.
2. Click 📄 Load SRT/LRC and choose your lyrics file. Each subtitle entry becomes one phrase block on the timeline, placed at its start and end time.
3. Press ▶ to play. The preview canvas shows each phrase appearing and disappearing in sync with the music.

Just want to look around first? ✨ Load Demo and 💎 Topaz Summer Sky Demo load a finished sample project with music, so you can see what the effects look like before using your own files.

Step 3 — (Optional) Generate the SRT automatically

If you don't have timed lyrics, open the automatic transcription panel. It offers three ways to turn the vocals into an SRT file:

• Groq Whisper API — very fast, and Groq offers a free tier. You paste your own API key.
• OpenAI Whisper-1 API — pay-as-you-go with your own OpenAI key.
• In-browser Whisper (Tiny / Base) — no key and no cost. The model (about 75–140 MB) is downloaded to your browser cache the first time and the transcription runs on your own machine.

The result appears as an SRT preview that you can apply straight to the timeline or save as a file. Speech recognition on sung vocals is never perfect, so always play the song once and fix wrong words or timings. The details are covered in Auto-generate lyric subtitles with Whisper.

Step 4 — Edit phrases in the Phrase Inspector

Click any phrase block on the timeline to open it in the Phrase Inspector on the right. Here you can change:

• Text — fix typos, add line breaks or emphasise a word.
• Start / End time — type exact seconds, or use the ±0.5 s overlap buttons to let a line linger into the next one.
• Lane — two lanes (upper and lower) let two phrases be on screen at the same time, which is useful for call-and-response parts and backing vocals.
• IN motion and OUT motion — the entry and exit animation of this phrase.
• Animation speed, font style, font size, text color, glow color, screen position and writing mode — including vertical text for Japanese and Chinese lyrics.

Quick Style Presets apply a coordinated look in one click, and anything you like can be stored with Save Current Settings as Favorite in the ⭐ Favorites tab.

Step 5 — Apply kinetic typography effects

The 🎨 Effects tab lists every entry (IN) and exit (OUT) animation. Drag an effect card onto a phrase, or select a phrase and choose the motion in the inspector. The effects list describes each animation.

To get a first draft quickly, press 🎲 Random Apply to All. It assigns a random combination of IN/OUT motions and styles to every phrase. Press it again until you like the overall energy, then hand-tune the important lines — usually the first line of each chorus and the song title. 📏 Apply Font Size to All keeps sizes consistent after random styling.

For ideas on matching motion to tempo and genre, see Kinetic typography tips for lyric videos.

Step 6 — Pick a background

The 🌌 Backgrounds tab offers animated, procedurally generated scenes such as a 3D wire tunnel, synthwave grid, audio spectrum, matrix rain, rainy lo-fi and seasonal Halloween and Christmas themes. Simple solid backgrounds (Minimal Dark, Pure Black) are also available in the preview bar if you prefer to let the text carry the video. You can also set a video as the background track.

Step 7 — Save your timeline

Click 💾 Save Timeline to download the project as a JSON file containing all lyrics, timings and effect settings. Load it later with 📂 Load Timeline to continue editing. The audio file itself is not stored in the JSON, so keep your song file alongside it.

Step 8 — Export the MP4

Click 🎬 Export Video and choose:

• Resolution — 720p or 1080p (landscape or vertical), or 1080×1080 square.
• Frame rate — 30 fps is smaller and faster; 60 fps makes fast motions smoother.
• Bitrate — 3 Mbps (standard), 6 Mbps (high) or 12 Mbps (ultra). For YouTube, 6–12 Mbps at 1080p keeps glow and particle effects clean after re-compression.

The video is encoded to H.264 video with AAC audio using ffmpeg.wasm, directly in your browser. Keep the tab open and in the foreground until it finishes. A small watermark logo is placed in the lower-right corner; you may crop or cover it in any video editor.

Troubleshooting

Export is slow or stops

Encoding uses your CPU and memory. Close other heavy tabs, try 30 fps or 720p, and make sure the browser tab is not minimised (browsers throttle background tabs).

Lyrics are out of sync

Check that the SRT was made for the same version of the song (radio edit and album version often differ by a few seconds). You can shift individual phrases in the inspector, or correct the file and load it again.

Characters are not displayed

Some decorative fonts only cover Latin letters. Pick a font that supports your language in the Font Style menu.

More answers are on the FAQ page.