I am making a WebApp that uses WebSpeech API for Text to Speech.
The problem I am facing is that whenever the screen goes off or browser window is switched, particularly on mobile devices, the speech synthesis is just stopped. When the text to be read takes longer time, the device screen times out, the reading progress is lost, which is really bad UX.
The basic synthesis controller is is created by const synth=window.speechSynthesis; which is attached to window.
I have overcome with a dirty workaround of keeping the screen on by using NoSleep.js, which essentially plays a video in the background to keep the device awake.
However, I noticed that some music players can play audio when browser is minimised and even when the screen is turned off. Example: wynk.in
Is it possible to achieve the same in my case? Any inputs on how is it done in music apps? Is attaching to anything other than window going to help?
- Link to my WebApp: https://yakshag.github.io/tts.html
- Link to my JS Script: https://yakshag.github.io/js/tts.js
PS: I am a beginner in JavaScript :p
