Ionic Music Controls does not work | Ionic 3 + Ionic Native Media + Ionic Native Music Controls

manpreet Best Answer 2 years ago

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.

I've installed all cordova plugins required of course.

I've switched ON the 'Audio' option in Capabilities -> 'Background Modes' using XCODE 9.

I'm testing it on iOS (10.3 / 11) simulator and device, and on Android tablet device.

Home.html

 padding>
  
 ion-button (click)="play()">
  play file!

 ion-button (click)="pause()">
  pause file!

Home.ts

  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().
                                                

                                                                                                        
                                                    
                                                
                                                

                                                    

                                                        
                                                            0
                                                            views 

                                                            0
                                                                likes 
                                                            
                                                            

                                                            0
                                                            shares
                                                            


    

         Facebook
        
         Twitter
        
        
         Linked In 
        
          WhatsApp