Ionic: audio playing in MusicController stops when opening a link with InAppBrowser plugin

Ionic Framework ionic-v3
1

My Android project is an Ionic app which streams audio, also when the app is pushed to the background. The MusicController plugin handles the background audio. Everything works well with my app, i.e. audio can be played in the background while doing things inside other apps.

However, when I click a URL inside my app, which is launched in the system’s Browser via the InAppBrowser plugin (=IAB), the audio abrubtly stops and the MusicController is stopped and closed. The app itself however has not been closed, since it can be reactivated from the Task View without showing the splash screen (so pushed to background).

Would anyone have any idea why this happens? Can I prevent the IAB plugin from shutting down the audio channel?

Inside my .ts:

import { InAppBrowser } from '@ionic-native/in-app-browser';

Constructor:

private iab: InAppBrowser,

And the function to open the link:

openExternalBrowser(link) {
   this.iab.create(link, '_system');
}
2

Additional info:

The music keeps playing in the background when opening any of the system browsers from their own icon, so the problem seems to be within the IAB plugin.

3

I’m getting desperate with this… Anyone has any idea? Even the smallest?

4

Still reaching out for help… Even updating the “cordova-plugin-inappbrowser” to v.3.0.0 does not resolve anything!

5

Still struggling with this one, I have not reached any solution for this problem. I downgraded to v.1.7. of the in-app-browser plugin, with exactly the same results.

If there is no way to solve this with the cordova IAB plugin, I should probably look into an alternative browser solution? Any hints on that?

6

Big things sometime come down to small mistakes… I found the reason why this happened. The problem is NOT in the plugin, but rather a mistake in the HTML code, which I overlooked several times…

<a href (click)="openExternalBrowser(item.webURL)">{{ item.webURL }}</a>

The href tag that was left there is obsolete… And when clicking the link element, it couldn’t decide what to do and it actually crashes my app by returning to the home page (and closing the background music player).

So, the simple solution was removing href from HTML:

<a (click)="openExternalBrowser(item.webURL)">{{ item.webURL }}</a>

And it all works like it should!

1 Like