My name is Dipesh Sapkota, and as a Computer Engineering student and freelance motion graphics/VFX artist with over three years of industry experience, I am always looking for ways to merge software engineering with creative workflows.
If you work in video post-production, you know that one of the biggest time-sinks in Adobe After Effects is syncing visual effects to audio. Manually scrubbing through a track, listening for transient peaks, and dropping timeline markers one by one breaks your creative flow and eats up hours of your day.
To solve this bottleneck, I built BeatMarker—an automated After Effects plugin that analyzes audio tracks and instantly places composition markers precisely on the beat.
Here is a breakdown of how I built it and the technology stack powering it under the hood.
The Tech Stack: Bridging Web Tech and Adobe
Adobe’s CEP (Common Extensibility Platform) allows developers to build plugin panels using standard web technologies. For BeatMarker, I utilized a hybrid stack:
- JavaScript (ES6+) & HTML/CSS: For building the interactive plugin user interface and handling the core application logic.
- Web Audio API: The engine behind the scenes. This modern browser API is incredibly powerful for decoding audio data and running frequency analysis natively within the plugin panel.
- ExtendScript: Adobe’s proprietary JavaScript dialect (based on the older ECMAScript 3 standard). This acts as the bridge that takes the data generated by the web panel and executes the actual commands inside the After Effects timeline.
How the Beat Detection Algorithm Works
The core challenge was translating an audio file into mathematical peaks that After Effects could understand as timestamps. The workflow is divided into three main phases:
1. Decoding and Processing
When an audio file is loaded into the BeatMarker panel, the Web Audio API decodes the audio buffer. Instead of just looking at raw volume, the algorithm filters the track to isolate low-frequency, high-energy transients—typically the kick drums or bass hits that define a track's BPM (Beats Per Minute).
2. Peak Detection Algorithm
Once the audio is filtered, the JavaScript logic scans the audio buffer data for amplitude spikes that cross a specific dynamic threshold. When a spike is detected, the algorithm calculates the exact time in seconds where that beat occurred.
3. ExtendScript Injection
Modern JavaScript cannot directly modify an After Effects composition, which is where ExtendScript comes in. The web panel takes the array of beat timestamps and passes them as a stringified payload to the ExtendScript engine.
The ExtendScript code iterates through the timestamps, selects the active audio layer in your composition, and utilizes the MarkerValue object to inject a marker at each specific timecode.
The Result: A Frictionless Workflow
By automating the beat detection process, BeatMarker turns a 15-minute manual task into a 2-second click. It provides an immediate visual grid on the timeline, allowing motion designers to instantly snap keyframes, layer in-points, and camera cuts exactly to the rhythm of the music.
Building this tool was a great exercise in algorithm design, audio processing, and understanding the bridge between modern DOM environments and legacy scripting engines.
Check out the Project
I have open-sourced the code for anyone interested in exploring the Web Audio API, Adobe CEP development, or just wanting to speed up their editing workflow.
- 💻 GitHub Repository: BeatMarker Source Code
- 🌐 My Portfolio & Projects: dipeshsapkota7.com.np
If you try it out or want to collaborate on making the algorithm even more accurate, feel free to open a PR or drop a comment below!
Dipesh Sapkota (@dszae) is a Computer Engineering student based in Kathmandu, Nepal, specializing in web development, VFX, and workflow automation.
Top comments (0)