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
Related
I would like to have a web page being able to act like a music player.
The user enqueues a list of audio files (hosted on the server) and they start playing. When the first audio is over, the second begins, etc, until the last one.
I was able to easily implement this functionality using an <AUDIO> element, and replacing its src attribute with Javascript by adding an event listener on the ended event.
The problem is that this does not work consistently on mobile, because once the screen is locked, the Javascript does not keep executing. It may work for one song or two, but at some point it stops "skipping" to the next audio track.
From my understanding, this behaviour is caused by the fact that mobile browsers stop the Javascript event loop after some time to save battery when the screen is locked. I am aware of the Screen Lock API, I assume keeping the screen always on would solve my problem, but I don't want to keep the screen always on.
I could delegate playing audio files to a web worker, which should theoretically keep running in the background. Still, I'm not sure it won't be stopped when the screen is locked, and most importantly I am not sure it can even play sounds.
Is there anything similar to the Screen Lock API that allows me to ask permission to keep scripts executing also when the screen is locked?
If not so, how could I overcome this problem?
After some research, I discovered that the act of killing the javascript event loop is highly browser-specific.
Chrome for Android seem to let the playback run indefintely.
Firefox for Android is stricter, and kills the event loop.
The System Wake Lock looks like a promising API for solving the above problem. At the moment, the W3C is still in process of collecting use cases in order to be able to define a new standard:
https://github.com/w3c/system-wake-lock/issues/4
I have an html5 audio player on my page that streams from my icecast server, all working OK. However, when people block their phone there's no metadata, only the play button that iOS/Android offers.
Is there a way to show something like 'Glaciar's livestream', like when the Spotify app shows the song's title and artist? I'm using PHP and Javascript apart from HTML and CSS.
Thanks in advance!
You can use the Media Session API to customize what's been shown on the lock screen.
But it is not supported by Safari which means you can't use it to customize the lock screen on an iOS device.
I just came along the same issue. Our Webapp would not display anything on the lock screen even though audio was playing. This is what I just found out:
We are setting up an new Audio() element in javascript - within the user interaction we call audio.load(). Then we wait for the canplay event to fire and with that event handler, we call audio.play(). When the phone now gets locked, there is nothing shown on the lock screen.
However, when we add audio.play() directly after audio.load(), so it is called within the same user interaction, everything shows up fine on the lock screen. So it seems like, it matters if audio.play() is called within a user interaction.
Some more background in case someone wonders why we are not calling play within the user interaction: We usually use an audio context (that is unlocked within a user interaction) and just started to fall back to an audio element, due to numerous audio related bugs in safari.
I'm getting a trouble while running JS code in a browser.
I've got a small web page which uses HTML5 location API for tracking a user.
User opens my website, logs in, and goes to a certain page on which I'm using location API to track user's location. Everything works fine until user's phone goes to sleep or user presses "home" button to minimize browser. The same thing happens on both Android and iPhone.
Is there any way to prevent the phone from going to sleep and let JS code work while browser is minimized?
one of the way I found is using video on a page where all JS located. but another problem is - screen became always ON, which can cause battery to discharge too fast (if I turn off screen manually using power button everything stops working)..
still looking for some ideas...
We have the following problem:
We're developing a browser-based flash application for video calls. The problem with that application is that when you are talking with somebody the display of your PC/Mac starts to fade out and a couple of minutes later the screensaver appears (if such is present).
How to keep the page active, so that the PC/Mac does not enter in screensaver mode?
This should be done, using JavaScript only, because the flash-part of the application is a JavaScript based API and we do NOT have access to the flash directly.
Any ideas?
EDIT: can I put a small and invisible flash APP on that page that keeps the machine from sleeping?
You can use NoSleep.js
https://github.com/richtr/NoSleep.js
Prevent display sleep and enable wake lock in all Android and iOS web browsers.
I've been evaluating HTML5 audio on iOS 4 and have been trying to understand its limitations. From what I can tell...
It is possible to play audio in the background
It is not possible to fire JavaScript events in the background upon track completion
It is possible to fire JavaScript events while the screen is off, but Safari must be in the foreground (before turning the screen off)
My goal for this current project is to create a dynamic playlist that will continue to fire events and move to the next track even while Safari is not in the foreground. Is this possible with the current way HTML5 audio works on iOS?
I am curious about how the chaining of JavaScript events works on iOS if anyone has additional information. It seems that you are allowed to queue back to back sounds, but it must happen shortly after a "human" function happens (for example, tapping an element). Anything else that tries to queue a sound outside of this human function is denied the ability to play.
Also...
Is it even possible to have events that fire to move a real iOS application to the next track? It seems as if the application is only allowed to finish its current audio stream and then it goes into an idle state. Just trying to figure out all the angles here!
This is quite an old question, so I'm not sure if you've found an answer already or not.
One thing I know is that an audio clip cannot be played via JavaScript on mobile Safari.
Autoplay audio files on an iPad with HTML5
The only way to make audio play, is through a click event. This wasn't the case on 3.x, but on 4.x it is. This is because Apple doesn't want the webapp to download audio on a 3g connection programmatically, so they force the user to initiate it.
I would think that if all of the tracks were started downloading (cached), then it may be possible. I would try forcing the user to start one track, and at the same time call .load() on all of the other tracks (in the same click handler). This will force the iOS device to start downloading the audio tracks, and you may be able to play the next track (not sure though).