renderFrames only collects audio from the first tab, so short clips can be missing with concurrency > 1

Open
#20 0 comments 0 reactions 0 assignees View on GitHub

@elwizard33 is already working on this.

Since Nov 2, 2026.

  • #27 by @elwizard33 — open

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
25/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Stale
Tech stack
react, typescript

Research direction

Start at renderFrames, where the issue says audio sources are read from pages[0]; inspect how pages render queued frames and where audioSources is returned. Reproduce with the provided two-frame composition at concurrency 2, then check that sources from all pages are included and duplicate keys collapse. A fix is already being pursued in linked pull request #27.

Written by the indexing model from the issue text.

Description

After rendering, renderFrames reads window.__RENDIV_AUDIO_SOURCES__ from pages[0] only. Each tab has its own window, and an <Audio> only registers in the tab that rendered a frame where it was mounted. So if a clip only mounts on frames that other tabs rendered, it isn't collected and silently drops out of the mix.

Since every tab pulls frames from the same queue, each one ends up rendering roughly every Nth frame (N = concurrency). In practice that means it mostly hits clips whose <Sequence> is shorter than the concurrency. Longer clips almost always get mounted in the first tab at some point too.

Repro:

const TwoTabs = () => (
  <>
    <Fill style={{ background: '#123' }} />
    <Sequence from={0} durationInFrames={1}><Audio src={staticFile('a.mp3')} /></Sequence>
    <Sequence from={1} durationInFrames={1}><Audio src={staticFile('b.mp3')} /></Sequence>
  </>
);
// <Composition id="TwoTabs" component={TwoTabs} durationInFrames={2} fps={30} width={320} height={180} />

With renderFrames({ ..., concurrency: 2 }), tab 1 renders frame 0 and tab 2 renders frame 1. On master (6d6aca2) the returned audioSources only has a.mp3.

Reading the map from every page and merging by key fixes it. The keys are already content-based, so duplicates collapse on their own. That's in #27.

Dominant language
TypeScript
Stars
159
Forks
32
PR merge metrics
No merged PRs in 30d

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from thecodacus/rendiv

All issues in thecodacus/rendiv

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.