Skip to content
This repository has been archived by the owner on Oct 6, 2022. It is now read-only.

Releases: tanguyantoine/react-native-music-control

v.1.4.0

21 May 06:51
Compare
Choose a tag to compare
chore: manual publish

release-2020-02-16

16 Feb 15:26
8f74739
Compare
Choose a tag to compare
Add Fast Forward and Rewind actions in compact view (#318)

release-2019-12-10: feat: handle Audio onFocusChanged if paused (#308)

09 Dec 22:47
Compare
Choose a tag to compare
* feat: priority high to expand notification

* fix: bug AUDIOFOCUS_GAIN playing if paused

* feat: handle AUDIOFOCUS_LOSS_TRANSIENT if isPlaying()

* Update package.json

Co-Authored-By: Tanguy Antoine <[email protected]>

release-2019-08-26

26 Aug 17:38
Compare
Choose a tag to compare
fix(java): Move stopForegroundService() to onStop event (#294)

0.10.6

20 Aug 22:09
Compare
Choose a tag to compare

react-native-music-control

React Native Music Control is a module to enable remote controls and display "Now Playing" info on the lock screen and in the notification area on Android and iOS.

Plays well with React Native Sound.


Mix between:

Project using this repo:

iOS lockscreen


Installation Process

  1. Add it to your project
npm install react-native-music-control --save
  1. Link it to your project

Linking on iOS

Automatic

react-native link

⚠️ You must enable Audio Background mode in XCode project settings :

XCode bqckground mode enabled

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.

CocoaPods

pod 'react-native-music-control', :path => '../node_modules/react-native-music-control'

Run pod install in /ios folder.


Linking on Android

Automatic

react-native link

Add following to your project AndroidManifest.xml

<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />

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

MainApplication.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()
        );
    }

    //......
  }

Add following to your project AndroidManifest.xml

<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />

Troubleshooting

Some users reported this error while compiling the Android version:

Multiple dex files define Landroid/support/v4/accessibilityservice/AccessibilityServiceInfoCompat

To solve this, issue just copy this line at the end of your application build.gradle

android/app/build.gradle

+configurations.all {
+    resolutionStrategy.eachDependency { DependencyResolveDetails details ->
+        def requested = details.requested
+        if (requested.group == 'com.android.support') {
+            if (!requested.name.startsWith("multidex")) {
+                details.useVersion '26.0.1'
+            }
+        }
+    }
+}

Usage

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

Enable and Disable controls

iOS: Lockscreen

Android: Notification and external devices (smartwatches, cars)

// Basic Controls
MusicControl.enableControl('play', true)
MusicControl.enableControl('pause', true)
MusicControl.enableControl('stop', false)
MusicControl.enableControl('nextTrack', true)
MusicControl.enableControl('previousTrack', false)

// Changing track position on lockscreen
MusicControl.enableControl('changePlaybackPosition', true)

// Seeking
MusicControl.enableControl('seekForward', false) // iOS only
MusicControl.enableControl('seekBackward', false) // iOS only
MusicControl.enableControl('seek', false) // Android only
MusicControl.enableControl('skipForward', false)
MusicControl.enableControl('skipBackward', false)

// Android Specific Options
MusicControl.enableControl('setRating', false)
MusicControl.enableControl('volume', true) // Only affected when remoteVolume is enabled
MusicControl.enableControl('remoteVolume', false)

// iOS Specific Options
MusicControl.enableControl('enableLanguageOption', false)
MusicControl.enableControl('disableLanguageOption', false)

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

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

Now Playing

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

You should call this method after a sound is playing.

For Android's rating system, remove the rating value for unrated tracks, use a boolean for RATING_HEART or RATING_THUMBS_UP_DOWN and use a number for other types.

Note: To use custom types, you have to define the type with updatePlayback before calling this function.

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 (Boolean or Number depending on the type)
  notificationIcon: 'my_custom_icon' // Android Only (String), Android Drawable resource name for a custom notification icon
})

Update Playback

You don't need to set all properties when calling the updatePlayback method, but you should always set elapsedTime for iOS support and better performance on Android.

You 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
  rating: MusicControl.RATING_PERCENTAGE // Android Only (RATING_HEART, RATING_THUMBS_UP_DOWN, RATING_3_STARS, RATING_4_STARS, RATING_5_STARS, RATING_PERCENTAGE)
})

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

Stop Controls

Resets, hides the music controls and disables everything.

MusicControl.stopControl()

There is also a closeNotification control on Android controls the swipe behavior of the audio playing notification, and accepts additional configuration options with the when key:

// Always allow user to close notification on swipe
MusicControl.enableControl('closeNotification', true, {when: 'always'})

// Default - Allow user to close notification on swipe when audio is paused
MusicControl.enableControl('closeNotification', true, {when: 'paused'})

// Never allow user to close notification on swipe
MusicControl.enableControl('closeNotification', true, {when: 'never'})

Register to Events

componentDidMount() {
    MusicControl.enableBackgroundMode(true);

    // on iOS, pause playback during audio interruptions (incoming calls) and resume afterwards.
    // As of {{ INSERT NEXT VERSION HERE}} works for android aswell.
    MusicControl.handleAudioInterruptions(true);

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

    // on iOS this event will also be triggered by audio router change events
    // happening when headphones are unplugged or a bluetooth audio peripheral disconnects from the device
    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('changePlaybackPosition', ()=> {
      this.props.dispatch(updateRemoteControl());
    })

    MusicControl...
Read more

release-2019-08-20

20 Aug 16:57
Compare
Choose a tag to compare
addTarget:action: should return MPRemoteCommandHandlerStatus

release-2019-07-10-2

10 Jul 21:04
9e6991a
Compare
Choose a tag to compare
fix: bump version

release-2019-07-10

10 Jul 21:01
3fccd12
Compare
Choose a tag to compare
fix: bump version

release-2019-07-09-2: fix(android): migrate support libraries to androidx

09 Jul 16:57
Compare
Choose a tag to compare
This fixes compilation with RN 0.60

Fixes gh-280

release-2019-07-09

09 Jul 16:56
Compare
Choose a tag to compare
fix(android): error can't find symbol Notification