I Built My Own Audio Player

I wonder if one could build this in HTML, so there is no need to install anything.

On both iOS and Android, HTML can play videos and mp3s while the screen is turned off. So maybe it is possible?

It's actually surprisingly hard to get iOS Safari to keep playing audio with the screen off.

When I made https://ambiph.one I ended up having to route everything through a MediaStreamAudioDestinationNode to trick Safari into thinking it's a livestream, which is apparently the only type of audio allowed to play in the background

Minimal demo here if it's helpful for anyone: https://codepen.io/matteason/pen/VYwdzVV

The solution I found after approximately two months of struggling with this problem: you have to generate an audio file that is a few seconds of silence, play it on a loop, and play it at the same time as the actual audio file you want to play (via separate audio elements, or an AudioContext). Specifically I believe you need to make sure the silence is “playing” at track boundaries for the real audio, so there is never a single moment where your webapp stops playing audio.