konstantinpaulus's banner
konstantinpaulus's profile picture

konstantinpaulus

@konstipaulus5,310 subscribers

CEO @diffusionhq (YC F24) | Github: k9p5

Shorts

Everyone’s doing this trendy hero effect with a plain <video> tag. I tried it with WebCodecs for extra performance. Repo + tutorial below

Everyone’s doing this trendy hero effect with a plain <video> tag. I tried it with WebCodecs for extra performance. Repo + tutorial below

101,208 Aufrufe

I finally landed on a memory-optimal way to render audio waveforms in the browser. The full audio is decoded once, then chunked into 2s bins. Each bin stores peaks at 800 peaks/sec in a Uint8Array. Bins are persisted individually in IndexedDB, which keeps the data as raw Uint8 arrays and is faster to read than OPFS. Local or session storage wouldn’t work here. A 2h video ends up as ~5.76 MB cached on disk. While scrolling or zooming the timeline, I load only the visible bins and downsample them to the required resolution. Everything runs async and I never keep more than a single bin in memory at once, ~800 bytes. Rendering supports mixed resolutions in the same pass since bins arrive async. By caching a read index and sorting bins ascending, each peak lookup stays O(1). On refresh, I wipe the IndexedDB so cache size never gets out of hand.

I finally landed on a memory-optimal way to render audio waveforms in the browser. The full audio is decoded once, then chunked into 2s bins. Each bin stores peaks at 800 peaks/sec in a Uint8Array. Bins are persisted individually in IndexedDB, which keeps the data as raw Uint8 arrays and is faster to read than OPFS. Local or session storage wouldn’t work here. A 2h video ends up as ~5.76 MB cached on disk. While scrolling or zooming the timeline, I load only the visible bins and downsample them to the required resolution. Everything runs async and I never keep more than a single bin in memory at once, ~800 bytes. Rendering supports mixed resolutions in the same pass since bins arrive async. By caching a read index and sorting bins ascending, each peak lookup stays O(1). On refresh, I wipe the IndexedDB so cache size never gets out of hand.

32,259 Aufrufe

Videos

Keine weiteren Inhalte verfügbar