Music Controls

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

https://github.com/ghenry22/cordova-plugin-music-controls2

Stuck on a Cordova issue?

Don't waste precious time on plugin issues.

If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.

Installation #

Capacitor
Cordova
Enterprise

$ npm install cordova-plugin-music-controls2 $ npm install @ionic-native/music-controls $ ionic cap sync

$ ionic cordova plugin add cordova-plugin-music-controls2 $ npm install @ionic-native/music-controls

Supported Platforms#

Android
iOS
Windows

Capacitor#

Not Compatible

Usage#

React#

Learn more about using Ionic Native components in React

Angular#

import { MusicControls } from '@ionic-native/music-controls/ngx';
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);