“无效”标签中新创建的音频元素不起作用

Question

I have web based audio player and want to preload next track while current is playing. So I create new audio object prefetch = new Audio(url) and when it is time to switch I just swap current audio with preloaded one and trigger .play() .

But it doesn't always work when tab is not active. Sometimes when it is time to swap I found prefetched object with networkState == 3 (NETWORK_NO_SOURCE) and readyState = 0 (HAVE_NOTHING) .

When I switch back to the tab - it immediately starts to playing.

I beleive it caused by async resource selection algorithm and browser optmiziations, but not sure how to make it work.

(Mostly reproducible in Safari).

Answer 1

It's because browser optimizations. Browser reduce resources allocated to inactive tab, that's why you JS is working lowly or may not work at all.

You can try using WebWorker ( docs ) that has no limits when tab goes inactive.

Check this answer too