JavaScript halts in inactive android Chrome tab

Question

I have a tiny webpage that streams music that I can listen to on my phone. The JavaScript on the page sets a timeout that loads the next song and plays it when the first song is over.

While the tab is active, everything works fine. But after the tab goes inactive, the timeouts continue to work for a few minutes, and then as soon as the currently playing song finishes, the next song does not load or play.

I'm assuming this is due to Chrome pausing JavaScript execution for the inactive tab, but I don't want to have to keep my screen on the whole time I'm playing music.

I've debugged the code using the Chrome mobile debugger by setting a timeout to run every 500ms that just shows the current Date. Once the screen goes black, the timeout drops to once every 1000ms, which is expected, but after a few minutes, the timeout stops altogether. But once the tab is active again, all the paused timeouts activate and run.

Chrome changing setInterval/setTimeout to 1000ms is expected and accounted for, but pausing execution completely makes my whole page stop working.

I've tried trying to keep the tab active be running AJAX requests every so often, but those pause as well. Nothing I've tried keeps the JavaScript running.

Basically, is there a way around this? Is there a way to keep the tab active when the screen is off?

Answer 1

No. For performance and battery life reasons we stop all processing on tabs that are not currently active. The devices that these pages run on are very constrained compared to a desktop device and we need to respect the user.

We do have the option to keep music and audio playing in the background (when your screen is off) but you can't move to the next track like you need.