I'm working on a web app that plays through a playlist of mp3 files and I'm running into an issue on mobile browsers. I'll start playing a song and immediately turn the screen off. The website will continue to run and play 2-3 songs. After that it stops playing. I have only tested this with chrome on android.
What can I can do to keep the music playing?
If the screen is turned off you can't stop the OS from shutting down or freezing apps - as #Niels points out in the question comments.
However, you can keep the screen awake by using this NoSleep JavaScript library:
https://github.com/richtr/NoSleep.js
There's an official API to keep screens awake these days! More info at https://web.dev/wake-lock/
Related
If there is sound playing on your web page, you can lock the screen or minimize the browser, but the sound still plays. How can I turn off the sound in current cases?
try document.addEventListener("visibilitychange", onchange);, actually this is your question
I am developing a website where the landing page shows a video of waves at the beach. The customer then wanted me to implement audio in connection with that screen (some sea sounds).
On my way home listening to music, I checked the site from my mobile device. Everything worked great, but the music I was listening to (from Spotify, but I guess it's the same behaviour with other music apps), stopped.
I consulted Google, but didn't find a solution. Is there a way to prevent that?
Your music was playing by an app in your mobile . But when you open mobile browser , and then go to the website which has a video and sound on the front page . The browser tried to run the video with music . That's why your background app , which was playing music got interrupted as browser was also trying to handle the same audio api .
The same thing happen to me on my android mobile . But the recent chrome update has fixed the issue . But mozila and other browsers are not enabling the background music till.
I have no idea about iphone .
It makes complete sense. I don't know why you would want two sounds to be playing at the same time. That would be noise I guess. I think you don't have a problem, in fact it is best the website audio pauses other audio instances on your device.
I have checked in my iPhone with this website which has audio in it.
https://guccidive.gucci.com/
And also played song in Spotify and Gaana App. But both sounds are playing concurrently. I have iPhone 6s and used Safari browser to check.
And as Limitless Claver said it's correct only that at a time only 1 sound is playing. Since if you hear 2 sounds at the same time it will become noise for the user. And I can bet that user won't like it at all. So it's perfect to pause all other background sounds when a user is surfing your website.
There is nothing you can do for this. Since that's handled by the browser apps itself. There is nothing as of now we can do in our Website to work the way you want.
While Windows 10 for instance allows this to happen (had two youtube tabs running with sound and another application delivering separate audio), I really question whether this is a good idea on a phone where you basically can only have one app open at any time.
It appears that Apple allows for this to happen, but its depending on the app itself, so nothing you can change for anything but your own app, AFAICT.
I have created a Web App which plays music playlist and it works well on desktop browsers and also in mozilla and opera of android. But When I play the songs on Chrome browser of Android and I turn off the screen, it stops after playing the current song. And as soon as I turn the screen on, it starts loading the next song in line.
From my observations, what I have understood is Google Chrome browser on android pauses the javascript code from executing if the screen is turned off till the screen is not waken up again. Is there any way I can prevent my specific library from pausing? Any approach or events?
Some related this question is what I am looking for: JavaScript halts in inactive android Chrome tab
There are so many WebApps which does not stop playing music. Does it need some permissions from Google App Store?
check what happens with youtube, at least few years ago i had an awful time dealing with that and that's what proved to my client it cant be done in the given time frame and budget. that was actually device specific, on some devices it worked fine and on others it didnt. check if it happens on other devices. the only solutions i could think of ware either to prevent screen turn off (on problematic devices or all of them at the beginning), or to build an app and handle onPause event
I don't think that you can change the behaviour of the Chrome app, if they want to save battery in the background and stop the javascript, you won't reactivate it.
There are maybe some other ways to get it working.
Tell your users that they should use Firefox or Opera on their mobile device.
All apps are allowed to play or stream music in the background, so you could make or use an app for your task.
Maybe you can use the default music player app on android. Open a playlist of streams using the app. (I don't know if this is possible, because I have no android device.)
I know that is not exactly what you want, but a maybe a way to get it working.
I've built a microsite, that play random songs with Spotify. On desktop-browsers, there is no problem - I play the preview_urls - perfect! But on iPhone (iOS), the preview_url has no response - my player isn't play the preview. Looks like Safari couldn't load the song.
I've built the player with howler.js.
http://glui.me/?i=q229w7c61iyb02c/2014-06-30_at_17.23.png/
Anyone same problem with Spotify and iOS/Safari? Anyone an idea whats going wrong here?
Thank you!
Audio is locked on iOS until a sound is played within a user interaction (like a 'touchstart' event). v1.1.22 of howler.js has implemented a new feature that will try to automatically unlock the audio, but depending on your UI setup it may be a good idea to show an overlay of some sort that requires the user to touch the screen before they can use the app, thus unlocking the audio.
The howler.js docs have been updated explaining this: https://github.com/goldfire/howler.js#ios-playback
I'm developing an android smarthphone app that should have a video and images displayed side to side on the same screen. I'm using video.js for that. The problem is whenever I click the play button on the video, Android goes fullscreen automatically. How to stop this behavior?
Unfortunately there's no real way to stop this behavior as far as I know. Every video goes to fullscreen when you play it on an Android phone.