Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

Music Controls

Improve this doc

Music controls for Cordova applications. Display a 'media' notification with play/pause, previous, next buttons, allowing the user to control the play. Handle also headset event (plug, unplug, headset button).

Repo: https://github.com/homerours/cordova-music-controls-plugin

Installation

  1. Install the Cordova and Ionic Native plugins:
    $ ionic cordova plugin add cordova-plugin-music-controls
    $ npm install --save @ionic-native/music-controls@4
    
  2. Add this plugin to your app's module

Supported platforms

Usage

import { MusicControls } from '@ionic-native/music-controls';

constructor(private musicControls: MusicControls) { }

...

this.musicControls.create({
  track       : 'Time is Running Out',        // optional, default : ''
  artist      : 'Muse',                       // optional, default : ''
  cover       : 'albums/absolution.jpg',      // 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       : 'Absolution',     // optional, default: ''
  duration : 60, // optional, default: 0
  elapsed : 10, // 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
  hasScrubbing: false, // enable scrubbing from control center and lockscreen progress bar, optional

  // Android only, optional
  // text displayed in the status bar when the notification (and the ticker) are updated, optional
  ticker    : 'Now playing "Time is Running Out"',
  // All icons default to their built-in android equivalents
  playIcon: 'media_play',
  pauseIcon: 'media_pause',
  prevIcon: 'media_prev',
  nextIcon: 'media_next',
  closeIcon: 'media_close',
  notificationIcon: 'notification'
 });

 this.musicControls.subscribe().subscribe(action => {

   function events(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
                 break;
             case 'music-controls-play':
                 // Do something
                 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':
           const seekToInSeconds = JSON.parse(action).position;
           this.musicControls.updateElapsed({
             elapsed: seekToInSeconds,
             isPlaying: true
           });
           // 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);

Instance Members

create(options)

Create the media controls

Param Type Details
options MusicControlsOptions

Returns: Promise<any>

destroy()

Destroy the media controller

Returns: Promise<any>

subscribe()

Subscribe to the events of the media controller

Returns: Observable<any>

listen()

Start listening for events, this enables the Observable from the subscribe method

updateIsPlaying(isPlaying)

Toggle play/pause:

Param Type Details
isPlaying boolean

updateElapsed(args)

Platforms:iOS 

Update elapsed time, optionally toggle play/pause:

Param Type Details
args Object

updateDismissable(dismissable)

Toggle dismissable:

Param Type Details
dismissable boolean

MusicControlsOptions

Param Type Details
track string (optional)
artist string (optional)
cover string (optional)
isPlaying boolean (optional)
dismissable boolean (optional)
hasPrev boolean (optional)
hasNext boolean (optional)
hasSkipForward boolean (optional)
hasSkipBackward boolean (optional)
skipForwardInterval number (optional)
skipBackwardInterval number (optional)
hasScrubbing boolean (optional)
hasClose boolean (optional)
album string (optional)
duration number (optional)
elapsed number (optional)
ticker string (optional)
playIcon string (optional)
pauseIcon string (optional)
prevIcon string (optional)
nextIcon string (optional)
closeIcon string (optional)
notificationIcon string (optional)

API

Native

General