Filmstro Pro

The Challenge

Filmstro needed a full-featured music-to-video editing platform that runs entirely in the browser. Content creators and filmmakers needed to browse thousands of royalty-free tracks, adjust music parameters in real-time, and automatically synchronize audio dynamics to video content — without installing any software. The core technical challenge was building a performant audio engine with real-time parameter control, an SVG-based timeline editor with multiple interaction modes, and an intelligent auto-sync algorithm that maps music to footage naturally.

Before & After

Timeline Editor Evolution

Loading...

Before

After

Evolved the timeline from a simple waveform display into a full plugin-based editor with draw mode, keyframes mode, selection mode, and combined hybrid mode — supporting 24, 30, and 60 FPS with frame-accurate timing.

Project Gallery

The Solution

Built a Vue 3 single-page application with a plugin-based architecture. The audio engine uses a singleton composable (useSound) wrapping Tone.js and the Web Audio API for real-time parameter manipulation with zero-latency feedback. The timeline editor is built on SVG.js with a PluginManager that dynamically loads interaction modes. The auto-sync algorithm analyzes video timing and intelligently maps music dynamics to create natural-sounding synchronization. A stems mixer allows decomposing tracks into individual audio layers. Session state persists via IndexedDB through LocalForage, and Fuse.js powers weighted fuzzy search across the full music catalog loaded client-side.

Technical Details

The application is a Vue 3 SPA with Vuex 4 for state management across 6 namespaced modules (auth, browse, edit, audio, sessions, favourites). The audio engine uses a singleton useSound() composable maintaining a shared Web Audio context, with Tone.js handling synthesis and scheduling. The timeline editor is built on SVG.js 3.2 with draggable and panzoom plugins, using a PluginManager to dynamically load Draw, KeyFrames, Selection, and Combined modes — four major versions coexist for backwards compatibility. MIDI controller support is implemented via the WebMIDI API, allowing hardware mapping to audio parameters. The music library (3.8MB dataset) is loaded once and searched client-side via Fuse.js with pre-built indexes cached on the window object. Sessions persist through IndexedDB via LocalForage with multiple save slots. The app supports 44.1kHz and 48kHz sample rates for export compatibility. Environment configuration is resolved at runtime by hostname detection across local, dev, and live environments.

Results & Impact

The platform serves as the primary editing tool for Filmstro's user base of content creators, filmmakers, and YouTubers. The auto-sync algorithm eliminated the need for manual keyframing, dramatically reducing the time to produce synced music-video content. The plugin-based timeline architecture enabled rapid iteration across four major versions while maintaining backwards compatibility.