Search code examples
javascripthtmlhtml5-audio

Keep audio playing with mobile screen off

I'm building a website with HTML5 audio, including custom audio controls and visualization using JavaScript.

When opening the website in my mobile browser (I've only tested Android/Chrome, but I assume similar behavior on other systems), after a few seconds the screen will turn off and soon after the audio will stop playing.

Is there an official way in HTML oder JavaScript to tell the browser to keep the audio playing with screen turned off?

Side information: there is Screen Wake Lock API preventing the mobile screen from turning off. Since my website provides music, I want the phone to turn off the screen if desired, only keep playing the audio.

Solution

  • I added the mentioned Screen Wake Lock API on my homepage, activating it as soon as the user starts the music and the screen doesn't turn off by default anymore. However, if I now turn off the screen manually (Android/Chrome), the music will keep playing.

    This solves the issue in the case we are fine with having the screen staying on by default, so for me this question is answered.