How to use a large amount of audio clips in the video efficiently?

[Ivan-1F]

For instance, I have a list of times to play the audio:

const audioTimes = useMemo(() => Array(1500).fill(0).map((_, i) => i / 8), [])

And use the <Audio /> tag with map:

return (
    <>
        {audioTimes.map((time, i) => (
            <Sequence from={Math.round(time * fps)} durationInFrames={fps * 2} key={i}>
                <Audio src={staticFile('core/HitSong0.ogg')} />
            </Sequence>
        ))}
    </>
)

the preview and the <Player /> become extremely lag

Is there any efficient way to do this?

[JonnyBurger]

You could not render the sequences which are not relevant at a certain time:

return (
    <>
        {audioTimes.map((time, i) => {
			const from = Math.round(time * fps);
			if (frame < from || frame + (fps * 2) > from) {
				return null;
			} 

         	return  (
				<Sequence from={from} durationInFrames={fps * 2} key={i}>
                		<Audio src={staticFile('core/HitSong0.ogg')} />
            	</Sequence>
			)
        })}
    </>
)

[Ivan-1F]

After applying this, it gets better, but the timeline still become very laggy when there‘re audios to play, and audios are not played at the exact time it should be (later than expected), the timeline also flash back sometimes

[JonnyBurger]

That is unfortunate, I think the browser hits a limitation then.
Consider not trying to render 1500 audio tags at all, and think about if you can preprocess them instead into one audio file for example.

[Ivan-1F]

Oh, thanks anyway. I will try some other ways