1

I'm currently working on a progressive web app to play music (like Spotify or Google Play Music). I came upon a few things I'm not quite sure how to accomplish.

One of them is the feature that the music stopps playing as soon as the aux cable is removed from the phone. Is there a Javascript event or something similar I can attach an event handler to to dispatch the 'pause' action once the aux jack is removed?

товіаѕ
  • 2,881
  • 4
  • 23
  • 53
  • Are you able to play next audio when your app is running in background? – aareeph May 04 '18 at 10:48
  • 1
    @aareeph yes, it plays.. as long as Android doesn't kill the app which happens if I keep it in the background for a while – товіаѕ May 04 '18 at 11:05
  • in Android when I use html5 audio then the app doesn't kill the app. I am using howlerjs.com. However in iOS Safari it doesn't play the next audio when app is in background. – aareeph May 04 '18 at 12:18
  • @aareeph i do not use a library, i write everything myself related to playing audio using the web audio api – товіаѕ May 04 '18 at 12:56
  • right. Do you get Audio controls like this when audio is being played? If you are getting these Audio Controls then Android won't stop your audio. https://www.androidcentral.com/sites/androidcentral.com/files/styles/larger_wm_brw/public/article_images/2016/04/play-music-notification-shade.jpg?itok=tgx6R8VQ – aareeph May 04 '18 at 13:15
  • @aareeph no it doesn't show any audio controls. I figured that might be because I haven't implemented anything yet using the [Media Session API](https://developers.google.com/web/updates/2017/02/media-session) – товіаѕ May 04 '18 at 13:33
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/170379/discussion-between-aareeph-and-tobias-wurth). – aareeph May 04 '18 at 13:34

2 Answers2

2

You will not have such hardware event listener in PWA just with JS.

If you have the option to ask the user to install an service(like some app asks to install barcode scanner service to scan barcode in their app), you can create a helper class like in this solution, which will have an indent filter for aux like in this solution, when detected aux remove event, calls your PWA indent code, which pauses the music.

Anand
  • 9,672
  • 4
  • 55
  • 75
0

As an addition; I ran into some more issues discussed in this post regarding media notifications.

Implementing a hidden <audio> element allowed me to display those notifications with controls on them. Once I hooked up all of the controls (onPause, onPlay, skip, seek, ..) the device would automatically execute the onPause event once the cable has been removed from the device. This might be an Android or Chrome specific feature but it did the trick and was suitable for me.

товіаѕ
  • 2,881
  • 4
  • 23
  • 53