title: Ionic Music Controls does not work | Ionic 3 + Ionic Native Media + Ionic Native Music Controls
body: <p>I'm using Ionic 3 + Ionic Native Media + Ionic Native Music Controls but music controls doesn't works. Clicking Play / Pause on Music Controls nothing happen. Media streaming works well.</p>
  
  <p>I've installed all cordova plugins required of course. </p>
  
  <p>I've switched ON the 'Audio' option in Capabilities -> 'Background Modes' using XCODE 9. </p>
  
  <p>I'm testing it on iOS (10.3 / 11) simulator and device, and on Android tablet device. </p>
  
  <p>Home.html</p>
  
  <pre><code>&lt;ion-content padding&gt;
    &lt;!-- Bind the click event to a method --&gt;
  &lt;button ion-button (click)="play()"&gt;
    play file!
  &lt;/button&gt;
  &lt;button ion-button (click)="pause()"&gt;
    pause file!
  &lt;/button&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>Home.ts</p>
  
  <pre><code>  import { Component } from '@angular/core';
      import { NavController } from 'ionic-angular';
      import { Media, MediaObject } from '@ionic-native/media';
      import { MusicControls } from '@ionic-native/music-controls';
  
      @Component({
        selector: 'page-home',
        templateUrl: 'home.html'
      })    
      export class HomePage {
            file: MediaObject;
            constructor(private musicControls: MusicControls, private media: Media, public navCtrl: NavController) {
            }
            play(){
              this.file = this.media.create('https://archive.org/download/db2007-05-20.rm.flac16/db2007-05-20d1t01.mp3');
              this.file.play();
  
              this.musicControls.destroy(); // it's the same with or without the destroy 
              this.musicControls.create({
                track       : 'Test track',        // optional, default : ''
                artist      : 'test artist',                       // optional, default : ''
                cover       : '',      // optional, default : nothing
                // cover can be a local path (use fullpath 'file:///storage/emulated/...', or only 'my_image.jpg' if my_image.jpg is in the www folder of your app)
                //           or a remote url ('http://...', 'https://...', 'ftp://...')
                isPlaying   : true,                         // optional, default : true
                dismissable : true,                         // optional, default : false
  
                // hide previous/next/close buttons:
                hasPrev   : false,      // show previous button, optional, default: true
                hasNext   : false,      // show next button, optional, default: true
                hasClose  : true,       // show close button, optional, default: false
  
              // iOS only, optional
                album       : 'test album',     // optional, default: ''
                duration : 0, // optional, default: 0
                elapsed : 0, // optional, default: 0
                hasSkipForward : true,  // show skip forward button, optional, default: false
                hasSkipBackward : true, // show skip backward button, optional, default: false
                skipForwardInterval: 15, // display number for skip forward, optional, default: 0
                skipBackwardInterval: 15, // display number for skip backward, optional, default: 0
  
                // Android only, optional
                // text displayed in the status bar when the notification (and the ticker) are updated
                ticker    : 'Now playing test'
               });
               this.musicControls.subscribe().subscribe(action =&gt; {
                   function events(action) {
                    console.log('action', action);
                     const message = JSON.parse(action).message;
  
                         switch(message) {
                             case 'music-controls-next':
                                 // Do something
                                 break;
                             case 'music-controls-previous':
                                 // Do something
                                 break;
                             case 'music-controls-pause':
                                 // Do something
                                 console.log('musc pause');
                                 this.pause();
                                 break;
                             case 'music-controls-play':
                                 // Do something
                                 console.log('music play');
                                 this.play();
                                 break;
                             case 'music-controls-destroy':
                                 // Do something
                                 break;
                            // External controls (iOS only)
                            case 'music-controls-toggle-play-pause' :
                              // Do something
                              break;
                            case 'music-controls-seek-to':
                              // Do something
                              break;
                            case 'music-controls-skip-forward':
                              // Do something
                              break;
                            case 'music-controls-skip-backward':
                              // Do something
                              break;
  
                              // Headset events (Android only)
                              // All media button events are listed below
                              case 'music-controls-media-button' :
                                  // Do something
                                  break;
                              case 'music-controls-headset-unplugged':
                                  // Do something
                                  break;
                              case 'music-controls-headset-plugged':
                                  // Do something
                                  break;
  
                              default:
                                  break;
                          }
                     }
  
                 this.musicControls.listen(); // activates the observable above
                 this.musicControls.updateIsPlaying(true);
  
              });
          }
  
            pause(){
              this.file.pause();
            }
          }
  </code></pre>
  
  <p>I've  created a minimal ionic blank app from ionic starter, with Media play (works) and Music Controls (not works), it's available on github for testing : </p>
  
  <p><a href="https://github.com/fdambrosio/ionic-media-controls" rel="nofollow noreferrer">https://github.com/fdambrosio/ionic-media-controls</a>  </p>
  
  <pre><code>Ionic Info: 
  
     @ionic/cli-utils  : 1.12.0
      ionic (Ionic CLI) : 3.12.0
  
  global packages:
  
      cordova (Cordova CLI) : 7.0.1 
  
  local packages:
  
      @ionic/app-scripts : 3.0.0
      Cordova Platforms  : ios 4.5.1
      Ionic Framework    : ionic-angular 3.7.1
  
  System:
  
      ios-deploy : 1.9.2 
      ios-sim    : 6.1.2 
      Node       : v6.11.2
      npm        : 5.4.2 
      OS         : macOS Sierra
      Xcode      : Xcode 9.0 Build version 9A235 
  </code></pre>
  
  <p><strong>UPDATE - SOLVED</strong></p>
  
  <p>With latest cordova-music-controls-plugin version (2.1.3) this problems are solved. You can test it using this repo: <a href="https://github.com/fdambrosio/ionic-media-controls" rel="nofollow noreferrer">https://github.com/fdambrosio/ionic-media-controls</a></p>