# Using MediaPlugin to stream music, how can I keep music playing when switching out of app or locking phone?

**URL:** <https://forum.ionicframework.com/t/using-mediaplugin-to-stream-music-how-can-i-keep-music-playing-when-switching-out-of-app-or-locking-phone/69096>\
**Category:** ionic-v3\
**Created:** [November 3, 2016, 7:38pm UTC](https://forum.ionicframework.com/t/using-mediaplugin-to-stream-music-how-can-i-keep-music-playing-when-switching-out-of-app-or-locking-phone/69096 "2016-11-03T19:38:43Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![slodolce](https://avatars.discourse-cdn.com/v4/letter/s/e9a140/32.png) [@slodolce](https://forum.ionicframework.com/u/slodolce)\
**Post date:** [November 3, 2016, 7:38pm UTC](https://forum.ionicframework.com/t/using-mediaplugin-to-stream-music-how-can-i-keep-music-playing-when-switching-out-of-app-or-locking-phone/69096/1 "2016-11-03T19:38:43Z")

</div>

MediaPlugin works great for streaming, however the music fades out when switching out of the app or enabling the lock screen.

How can I keep the music playing in the background?

Saw this: [https://github.com/katzer/cordova-plugin-background-mode](https://github.com/katzer/cordova-plugin-background-mode)

But it looks like Apple Store isn’t to fond of it’s use.

Also, is there anyway to access music controls on the lock screen? The MusicControls plugin looks like it does it but only for Android and Windows, doesn’t look like there’s an iOS counterpart.

Here’s my code:

```
import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { MediaPlugin } from 'ionic-native';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

	radio: MediaPlugin;
	playing: boolean;

  constructor(public navCtrl: NavController, platform: Platform) {

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      	// Here you can do any higher level native things you might need.
    	this.radio = new MediaPlugin("http://relay.publicdomainproject.org/classical.aac.m3u");

    });
  }

  radioPlay() {
  	this.radio.play();
  	this.playing = true;
  }

  radioPause() {
  	this.radio.pause();
  	this.playing = false;
  }

}
```

---

<div class="post-metadata">

**Author:** ![Kopertone](https://avatars.discourse-cdn.com/v4/letter/k/90db22/32.png) [@Kopertone](https://forum.ionicframework.com/u/Kopertone)\
**Post date:** [November 3, 2016, 11:54pm UTC](https://forum.ionicframework.com/t/using-mediaplugin-to-stream-music-how-can-i-keep-music-playing-when-switching-out-of-app-or-locking-phone/69096/2 "2016-11-03T23:54:10Z")

</div>

I just completed an app and ran into the same problem, here is how I solved it.

To allow the audio to play in the background you to do two things. First, you need to set the background mode - audio to on within the Xcode capabilities. Second, you need your AppDelegate.m file in the platforms - classes folder to look like this.

> ```
> #import "AppDelegate.h"
> #import "MainViewController.h"
> #import <AVFoundation/AVFoundation.h>
> 
> ```

> ```
> @implementation AppDelegate
> 
> ```

> ```
> - (BOOL)application:(UIApplication*)application didFinishLaunchingWithOptions:(NSDictionary*)launchOptions
> {
> AVAudioSession *audioSession = [AVAudioSession sharedInstance];
> BOOL ok;
> NSError *setCategoryError = nil;
> ok = [audioSession setCategory:AVAudioSessionCategoryPlayback error:&setCategoryError];
> self.viewController = [[MainViewController alloc] init];
> return [super application:application didFinishLaunchingWithOptions:launchOptions];
> }
> 
> ```

> ```
> @end
> 
> ```

To get the player controls on the lock screen and notifications area you need this plugin: [GitHub - shi11/RemoteControls: cordova 3 plugin for interacting with ios7 remote controls and metadata](https://github.com/shi11/RemoteControls)

To accurately portray the play/pause icon make sure your app actually suspends the audio and not just pauses it.

Let me know if you run into any issues implementing these.

---

<div class="post-metadata">

**Author:** ![slodolce](https://avatars.discourse-cdn.com/v4/letter/s/e9a140/32.png) [@slodolce](https://forum.ionicframework.com/u/slodolce)\
**Post date:** [November 5, 2016, 4:15am UTC](https://forum.ionicframework.com/t/using-mediaplugin-to-stream-music-how-can-i-keep-music-playing-when-switching-out-of-app-or-locking-phone/69096/3 "2016-11-05T04:15:08Z")

</div>

This is great, thank you!

First two parts worked perfectly, able to continue playing music when switching out of application and while screen is locked.

Couple questions:

1. Tried to install RemoteControls, received this error when executing **ionic plugin add com.rd11.remote-controls**

Error: Registry returned 404 for GET on [https://registry.npmjs.org/com.rd11.remote-controls](https://registry.npmjs.org/com.rd11.remote-controls)

1. What was your solution for Android?

Thanks again!

---

<div class="post-metadata">

**Author:** ![Kopertone](https://avatars.discourse-cdn.com/v4/letter/k/90db22/32.png) [@Kopertone](https://forum.ionicframework.com/u/Kopertone)\
**Post date:** [November 5, 2016, 4:42am UTC](https://forum.ionicframework.com/t/using-mediaplugin-to-stream-music-how-can-i-keep-music-playing-when-switching-out-of-app-or-locking-phone/69096/4 "2016-11-05T04:42:18Z")

</div>

Do

ionic plugin add [https://github.com/shi11/RemoteControls](https://github.com/shi11/RemoteControls)

For Android I used the MusicControls plugin

---

<div class="post-metadata">

**Author:** ![slodolce](https://avatars.discourse-cdn.com/v4/letter/s/e9a140/32.png) [@slodolce](https://forum.ionicframework.com/u/slodolce)\
**Post date:** [November 5, 2016, 3:28pm UTC](https://forum.ionicframework.com/t/using-mediaplugin-to-stream-music-how-can-i-keep-music-playing-when-switching-out-of-app-or-locking-phone/69096/5 "2016-11-05T15:28:44Z")

</div>

Cool, that worked.

How did you go about implementing it with TypeScript?

---

<div class="post-metadata">

**Author:** ![Kopertone](https://avatars.discourse-cdn.com/v4/letter/k/90db22/32.png) [@Kopertone](https://forum.ionicframework.com/u/Kopertone)\
**Post date:** [November 5, 2016, 10:48pm UTC](https://forum.ionicframework.com/t/using-mediaplugin-to-stream-music-how-can-i-keep-music-playing-when-switching-out-of-app-or-locking-phone/69096/6 "2016-11-05T22:48:51Z")

</div>

You don’t need to do anything special besides for using ‘let’ and changing it to

```
window['remoteControls'].updateMetas((success)=>{
}, (fail)=>{
}, params);
```

---

<div class="post-metadata">

**Author:** ![slodolce](https://avatars.discourse-cdn.com/v4/letter/s/e9a140/32.png) [@slodolce](https://forum.ionicframework.com/u/slodolce)\
**Post date:** [November 6, 2016, 5:56am UTC](https://forum.ionicframework.com/t/using-mediaplugin-to-stream-music-how-can-i-keep-music-playing-when-switching-out-of-app-or-locking-phone/69096/7 "2016-11-06T05:56:13Z")

</div>

Okay, got it to work sort of… is there a hook for the pause/play button?

My constructor looks like this:

```
platform.ready().then(() => {

	this.radio = new MediaPlugin("http://relay.publicdomainproject.org/classical.aac.m3u");

	this.radio.init.then(() => {
		  console.log('Playback Finished');
		}, (err) => {
		  console.log('somthing went wrong! error code: ' + err.code + ' message: ' + err.message);
		});

		let artist = "Daft Punk";
		let title = "One More Time";
		let album = "Discovery";
		let image = "path_within_documents_storage OR url_starting_with_http_or_https";
		let duration = 1;
		let elapsedTime = 1;

		let params = [artist, title, album, image, duration, elapsedTime];
		window['remoteControls'].updateMetas((success)=>{
		}, (fail)=>{
		}, params);
});

```

But still not able to see the artist/title on the lock screen, it just shows up blank.

---

<div class="post-metadata">

**Author:** ![slodolce](https://avatars.discourse-cdn.com/v4/letter/s/e9a140/32.png) [@slodolce](https://forum.ionicframework.com/u/slodolce)\
**Post date:** [November 8, 2016, 6:28pm UTC](https://forum.ionicframework.com/t/using-mediaplugin-to-stream-music-how-can-i-keep-music-playing-when-switching-out-of-app-or-locking-phone/69096/8 "2016-11-08T18:28:07Z")

</div>

Got the hooks to work by adding the following to the constructor. Needed to declare event:any as TypeScript wouldn’t compile otherwise.

```
document.addEventListener('remote-event', (event:any) => {

    switch(event.remoteEvent.subtype) {
    	case "play":
    		console.log("PLAY");
    		this.radioPlay();
    		break;
    	case "pause":
    		console.log("PAUSE");
    		this.radioPause();
    		break;
    }
});

```

Still can’t get

```
window['remoteControls'].updateMetas((success)=>{
}, (fail)=>{
}, params);

```

to work though, did you place it in the constructor? On the play event?

I also noticed that the lock screen controls go away after you press pause, is there anyway to keep them up during a pause?

---

<div class="post-metadata">

**Author:** ![Kopertone](https://avatars.discourse-cdn.com/v4/letter/k/90db22/32.png) [@Kopertone](https://forum.ionicframework.com/u/Kopertone)\
**Post date:** [November 9, 2016, 6:04am UTC](https://forum.ionicframework.com/t/using-mediaplugin-to-stream-music-how-can-i-keep-music-playing-when-switching-out-of-app-or-locking-phone/69096/9 "2016-11-09T06:04:33Z")

</div>

Try with an image from a url. I couldn’t get the local file image to work.

---

<div class="post-metadata">

**Author:** ![slodolce](https://avatars.discourse-cdn.com/v4/letter/s/e9a140/32.png) [@slodolce](https://forum.ionicframework.com/u/slodolce)\
**Post date:** [November 12, 2016, 2:03am UTC](https://forum.ionicframework.com/t/using-mediaplugin-to-stream-music-how-can-i-keep-music-playing-when-switching-out-of-app-or-locking-phone/69096/10 "2016-11-12T02:03:03Z")

</div>

Ah, that was it. For reference, is there anyway to not show an image or does that value always have to be filled? I tried setting it as a null or “” and it ended up giving me the same issue

---

<div class="post-metadata">

**Author:** ![slodolce](https://avatars.discourse-cdn.com/v4/letter/s/e9a140/32.png) [@slodolce](https://forum.ionicframework.com/u/slodolce)\
**Post date:** [November 16, 2016, 1:08am UTC](https://forum.ionicframework.com/t/using-mediaplugin-to-stream-music-how-can-i-keep-music-playing-when-switching-out-of-app-or-locking-phone/69096/11 "2016-11-16T01:08:05Z")

</div>

Curious, were you able to get AAC files to work in Android? Mp3s work, but AACs are giving me an issue.

---

<div class="post-metadata">

**Author:** ![Kopertone](https://avatars.discourse-cdn.com/v4/letter/k/90db22/32.png) [@Kopertone](https://forum.ionicframework.com/u/Kopertone)\
**Post date:** [November 16, 2016, 1:24am UTC](https://forum.ionicframework.com/t/using-mediaplugin-to-stream-music-how-can-i-keep-music-playing-when-switching-out-of-app-or-locking-phone/69096/12 "2016-11-16T01:24:29Z")

</div>

For Android, I only use OGG files because I think they give the best quality for the size. If they worked on Apple I would use them there also but they don’t.

---

<div class="post-metadata">

**Author:** ![slodolce](https://avatars.discourse-cdn.com/v4/letter/s/e9a140/32.png) [@slodolce](https://forum.ionicframework.com/u/slodolce)\
**Post date:** [November 16, 2016, 1:39am UTC](https://forum.ionicframework.com/t/using-mediaplugin-to-stream-music-how-can-i-keep-music-playing-when-switching-out-of-app-or-locking-phone/69096/13 "2016-11-16T01:39:24Z")

</div>

What did you end up using for your iOS streams?

---

<div class="post-metadata">

**Author:** ![Kopertone](https://avatars.discourse-cdn.com/v4/letter/k/90db22/32.png) [@Kopertone](https://forum.ionicframework.com/u/Kopertone)\
**Post date:** [November 16, 2016, 1:53am UTC](https://forum.ionicframework.com/t/using-mediaplugin-to-stream-music-how-can-i-keep-music-playing-when-switching-out-of-app-or-locking-phone/69096/14 "2016-11-16T01:53:24Z")

</div>

I used AAC though none of my audio is streamed. This is my app for reference [https://play.google.com/store/apps/details?id=net.sleeporbit](https://play.google.com/store/apps/details?id=net.sleeporbit)

---

<div class="post-metadata">

**Author:** ![slodolce](https://avatars.discourse-cdn.com/v4/letter/s/e9a140/32.png) [@slodolce](https://forum.ionicframework.com/u/slodolce)\
**Post date:** [November 17, 2016, 5:43am UTC](https://forum.ionicframework.com/t/using-mediaplugin-to-stream-music-how-can-i-keep-music-playing-when-switching-out-of-app-or-locking-phone/69096/15 "2016-11-17T05:43:24Z")

</div>

I got the Android controls working in Android 6.0 and 7.1 but they don’t show up in 5.0?

P.S. Great app! Love how you broke the mold of a traditional looking app.

---

<div class="post-metadata">

**Author:** ![Kopertone](https://avatars.discourse-cdn.com/v4/letter/k/90db22/32.png) [@Kopertone](https://forum.ionicframework.com/u/Kopertone)\
**Post date:** [November 17, 2016, 5:34pm UTC](https://forum.ionicframework.com/t/using-mediaplugin-to-stream-music-how-can-i-keep-music-playing-when-switching-out-of-app-or-locking-phone/69096/16 "2016-11-17T17:34:47Z")

</div>

Thanks for the comment  
I haven’t seen any issues on android 5 that I know of.

---

<div class="post-metadata">

**Author:** ![slodolce](https://avatars.discourse-cdn.com/v4/letter/s/e9a140/32.png) [@slodolce](https://forum.ionicframework.com/u/slodolce)\
**Post date:** [December 18, 2016, 4:20am UTC](https://forum.ionicframework.com/t/using-mediaplugin-to-stream-music-how-can-i-keep-music-playing-when-switching-out-of-app-or-locking-phone/69096/17 "2016-12-18T04:20:44Z")

</div>

What was your solution for setting the volume? Using the Media Plugin I’m trying to use the setVolume method but it doesn’t seem to be working.

---

<div class="post-metadata">

**Author:** ![Kopertone](https://avatars.discourse-cdn.com/v4/letter/k/90db22/32.png) [@Kopertone](https://forum.ionicframework.com/u/Kopertone)\
**Post date:** [December 18, 2016, 11:33pm UTC](https://forum.ionicframework.com/t/using-mediaplugin-to-stream-music-how-can-i-keep-music-playing-when-switching-out-of-app-or-locking-phone/69096/18 "2016-12-18T23:33:27Z")

</div>

I use the Web Audio API

---

<div class="post-metadata">

**Author:** ![nkhuynh](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nkhuynh/32/105395_2.png) [@nkhuynh](https://forum.ionicframework.com/u/nkhuynh)\
**Post date:** [December 30, 2016, 1:16am UTC](https://forum.ionicframework.com/t/using-mediaplugin-to-stream-music-how-can-i-keep-music-playing-when-switching-out-of-app-or-locking-phone/69096/19 "2016-12-30T01:16:49Z")

</div>

Hello,

I have added [https://github.com/shi11/RemoteControls](https://github.com/shi11/RemoteControls) plugin, everything works great BUT not the progress bar, it’s not stop when is in Pause state. How can I make it stops when music paused?

Plus, if we click pause/play audio in app, the notification area buttons don’t update. It always is in Play mode.

Can you kindly give a help?

I’m using Ionic 2 + Cordova MediaPlugin.

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/f/f/ff5df847912d6bc23f63550f877ed41725b977cc.png)

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![Kopertone](https://avatars.discourse-cdn.com/v4/letter/k/90db22/32.png) [@Kopertone](https://forum.ionicframework.com/u/Kopertone)\
**Post date:** [December 30, 2016, 9:24pm UTC](https://forum.ionicframework.com/t/using-mediaplugin-to-stream-music-how-can-i-keep-music-playing-when-switching-out-of-app-or-locking-phone/69096/20 "2016-12-30T21:24:39Z")

</div>

To get the button to change you need to stop the audio instead of just pausing. Seems to be the only way to get it to work properly.

[Next page](https://forum.ionicframework.com/t/using-mediaplugin-to-stream-music-how-can-i-keep-music-playing-when-switching-out-of-app-or-locking-phone/69096.md?page=2)