react-native-music-control

React Native module to control remote controls on lockscreen + display Now playing Info on lockscreen (MPNowPlayingInfoCenter)

Play well with React Native Sound

Mix between :

• https://github.com/Muntligt/cordova-plugin-remotecommand (iOS)
• https://github.com/Muntligt/cordova-plugin-nowplaying (iOS)
• https://github.com/homerours/cordova-music-controls-plugin (Android)
• shi11/RemoteControls#32 (Android)

Project using it :

• https://github.com/just-team/react-native-youtube-player

Install

Add it to your project

npm install react-native-music-control --save

iOS

Automatic

react-native link

Manual

In XCode, right click Libraries. Click Add Files to "[Your project]". Navigate to node_modules/react-native-music-control. Add the file MusicControl.xcodeproj.

In the Project Navigator, select your project. Click the build target. Click Build Phases. Expand Link Binary With Libraries. Click the plus button and add libMusicControl.a under Workspace.

Android

Automatic

react-native link

Manual

android/app/build.gradle

dependencies {
    ...
    compile "com.facebook.react:react-native:+"  // From node_modules
+   compile project(':react-native-music-control')
}

android/settings.gradle

...
include ':app'
+include ':react-native-music-control'
+project(':react-native-music-control').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-music-control/android')

MainActivity.java

+import com.tanguyantoine.react.MusicControl;

public class MainApplication extends Application implements ReactApplication {
    //......

    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
+           new MusicControl(),
            new MainReactPackage()
        );
    }

    //......
  }

Use

import MusicControl from 'react-native-music-control';

Now Playing

This method enables the music controls. To disable them, use resetNowPlaying()

You should call this method after a sound is playing

MusicControl.setNowPlaying({
  title: 'Billie Jean',
  artwork: 'https://i.imgur.com/e1cpwdo.png', // URL or RN's image require()
  artist: 'Michael Jackson',
  album: 'Thriller',
  genre: 'Post-disco, Rhythm and Blues, Funk, Dance-pop',
  duration: 294, // (Seconds)
  description: '', // Android Only
  color: 0xFFFFFF, // Notification Color - Android Only
  date: '1983-01-02T00:00:00Z', // Release Date (RFC 3339) - Android Only
  rating: 84 // Android Only (Percentage)
})

Playback

You don't need to call this method filling all properties, but you should always fill elapsedTime for iOS support and better performance on Android.

You also don't need to call this method repeatedly to update the elapsedTime, only call it when you need to update any other property

MusicControl.updatePlayback({
  state: MusicControl.STATE_PLAYING, // (STATE_ERROR, STATE_STOPPED, STATE_PLAYING, STATE_PAUSED, STATE_BUFFERING)
  speed: 1, // Playback Rate
  elapsedTime: 103, // (Seconds)
  bufferedTime: 200, // Android Only (Seconds)
  volume: 10, // Android Only (Number from 0 to maxVolume) - Only used when remoteVolume is enabled
  maxVolume: 10 // Android Only (Number) - Only used when remoteVolume is enabled
})

Examples

// Changes the state to paused
MusicControl.updatePlayback({
  state: MusicControl.STATE_PAUSED,
  elapsedTime: 135
})

// Changes the volume
MusicControl.updatePlayback({
  volume: 9, // Android Only
  elapsedTime: 167
})

Reset now playing

Resets and hides the music controls

MusicControl.resetNowPlaying()

Enable/disable controls

iOS: Lockscreen

Android: Notification and external devices (smartwatches, cars)

MusicControl.enableControl('play', true)
MusicControl.enableControl('pause', true)
MusicControl.enableControl('stop', false)
MusicControl.enableControl('nextTrack', true)
MusicControl.enableControl('previousTrack', false)
MusicControl.enableControl('seekForward', false);
MusicControl.enableControl('seekBackward', false);
MusicControl.enableControl('seek', false) // Android only
MusicControl.enableControl('setRating', false) // Android only
MusicControl.enableControl('volume', true) // Android only  - Only affected when remoteVolume is enabled
MusicControl.enableControl('remoteVolume', false) // Android only
MusicControl.enableControl('enableLanguageOption', false); // iOS only
MusicControl.enableControl('disableLanguageOption', false); // iOS only
MusicControl.enableControl('skipForward', false); // iOS only
MusicControl.enableControl('skipBackward', false); // iOS only

skipBackward and skipForward controls on iOS accept additional configuration options with interval key:

MusicControl.enableControl('skipBackward', true, {interval: 15}))
MusicControl.enableControl('skipForward', true, {interval: 30}))

Register to events

componentDidMount() {
    MusicControl.enableBackgroundMode(true);

    MusicControl.on('play', ()=> {
      this.props.dispatch(playRemoteControl());
    })

    MusicControl.on('pause', ()=> {
      this.props.dispatch(pauseRemoteControl());
    })

    MusicControl.on('stop', ()=> {
      this.props.dispatch(stopRemoteControl());
    })

    MusicControl.on('nextTrack', ()=> {
      this.props.dispatch(nextRemoteControl());
    })

    MusicControl.on('previousTrack', ()=> {
      this.props.dispatch(previousRemoteControl());
    })

    MusicControl.on('seekForward', ()=> {});
    MusicControl.on('seekBackward', ()=> {});

    MusicControl.on('seek', (pos)=> {}); // Android only (Seconds)
    MusicControl.on('setRating', (rating)=> {}); // Android only (Percentage)
    MusicControl.on('volume', (volume)=> {}); // Android only (0 to maxVolume) - Only fired when remoteVolume is enabled

    MusicControl.on('togglePlayPause', ()=> {}); // iOS only
    MusicControl.on('enableLanguageOption', ()=> {}); // iOS only
    MusicControl.on('disableLanguageOption', ()=> {}); // iOS only
    MusicControl.on('skipForward', ()=> {}); // iOS only
    MusicControl.on('skipBackward', ()=> {}); // iOS only
}

TODOS

• Android support
• Test
• Publish package
• React-Native link configuration for Android
• React-Native link configuration for iOS
• Android : Handle remote events
• Android : Display cover artwork

Contributing

Of coursssssseeeeee. I'm waiting your PR :)