Keep Phone From Locking While App Playing Stream

omgwalt

My app uses the vue-plyr component to play audio files.

If an iPhone is playing an audio file with the app, and the preset auto-lock time gets tripped, the app stops playing.

Ironically, if I tap the screen, the interface shows the app is still playing, but no sound comes out.

I suspect the same thing happens on an Android phone, but I haven’t verified that yet.

Is there a way to keep the app playing the audio file by preventing the phone in some way from auto-locking while playing?

Or, better yet, is there a way to keep the app playing even if the phone auto-locks itself?

dobbel

@omgwalt

I suggest you ask about this first in the vue-plyr community.
what kind of app? Cordova , Capacitor, PWA, spa ect

btw Quasar has a media player ( plugin ): https://github.com/quasarframework/quasar-ui-qmediaplayer

omgwalt

@dobbel It’s a cordova app. Thanks for the tip about the Quasar media player. I didn’t know about that one. I’ll take a look at it. As you suggest, I’ll bring this up in the vue-plyr community.

omgwalt

@dobbel Upon first glance at qmediaplayer, it’s great that it’s Quasar-ready. But one thing I really like about vue-plyr is its granular nature. Among other things, it will tell me where in the video or audio file the user is playing and for how long they play it, whereas qmediaplayer doesn’t seem to have anything like that. It seems to be more of a plain vanilla player. Am I overlooking something?

dobbel

@omgwalt I have not tried the quasar media player so it could be missing some features.

I did find a cordova plugin that will play media. It mentions an option to keep playing while locking the screen on IOS: playAudioWhenScreenIsLocked

This is probably the only way to keep audio playing while the phone is locked. You’ll probably have to create the UI yourself…

https://github.com/apache/cordova-plugin-media

Hawkeye64

@omgwalt I wrote QMediaPlayer after being dissatisfied with vue-plyr and plyr in general. We needed something better to be used at work in our application.

As far as I know, you have to add permissions for both Android and iOS for keep screen unlocked, usually related to “Background Activity” for your app.

omgwalt

Thanks @dobbel and @Hawkeye64 for your help.

Curiously, I learned from a friend who has an Android phone that the issue doesn’t appear on those phones. This seems to be an iPhone-only issue.

@Hawkeye64 is there a way to get at those granular pieces of information regarding when a listener/user plays a part of a file like there is with vue-plyr? Also, is there a way to add that permission you referenced in QMediaPlayer? If there’s a way to do those things, I’d be happy to switch over to the QMediaPlayer component that you wrote.

Hawkeye64

Permissions are OS-dependent and cannot be changed by a component. It is built into your package before run-time.
For iOS look at this: https://developer.apple.com/documentation/bundleresources/information_property_list/uibackgroundmodes

omgwalt

@Hawkeye64 So how does Cordova do it?

It makes me wonder if there’s some setting I can set in Cordova when I build.

Hawkeye64

Cordova and Capacitor are the runtime part of the app that actually can do permissions since they have direct code to the OS.
For iOS, you would modify your Info.plist before compiling with Xcode.

omgwalt

@Hawkeye64 I tried adding the following to my app’s plist under src-cordova/ios/[app-name]/[app-name]-Info.plist in dev mode, but without success:

<key>UIBackgroundModes</key>
<array>
  <string>audio</string>
</array>

I still get the same result. After the phone locks, the sound stops playing. Upon re-engaging the phone’s display, I can see that the audio player’s progress display continues to count seconds, but no sound comes out of the speakers.

dobbel

@omgwalt

Read entire ‘iOS Quirks’ :

https://github.com/apache/cordova-plugin-media

playAudioWhenScreenIsLocked

omgwalt

@Hawkeye64 I’ve been trying to implement qmediaplayer in place of vue-plyr in my app.

I’m running into an issue with the qmediaplayer in iOS, built with Cordova, that doesn’t occur in MacOS or Windows.

The app is an SPA, and when I play a file from a remote server in dev mode in iOS by clicking the play button in the built-in player that qmediaplayer supplies, regardless of whether I’m testing my app directly on the simulator or testing it through Safari on the simulator, the app starts to play and a black pop-up with nothing apparently on it appears that covers the app’s page.

If I click on the black pop-up, I can see a few controls for pausing or forwarding/reversing, plus a close box (X). Clicking the X makes the pop-up go away.

This same result does not occur with the SPA when run in MacOS using Chrome or Safari or in Windows 10 using Chrome.

Any ideas why I might be encountering this issue in iOS?

omgwalt

More info:

It doesn’t cause an issue on my test Android device using Chrome.

Here is a web URL if you want to test is on an iOS simulator: https://www.loatoday.net/spa/

dobbel

@omgwalt You should create a github issue at the repo of the q-mediaplayer plugin:

https://github.com/quasarframework/quasar-ui-qmediaplayer

Hawkeye64

I will look into this with BrowserStack, but @omgwalt , please make sure there is a ticket/issue filed or I will not be able to prioritize it. Thanks.

omgwalt

@Hawkeye64 Sorry about the delay. I was dealing with another issue. I’ve just created the ticket on github.

https://github.com/quasarframework/quasar-ui-qmediaplayer/issues/159

No More Posting New Topics!

Keep Phone From Locking While App Playing Stream