Skip to main content

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#

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

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