Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork272
Display and manage media controls on lock screen and notification center for iOS and Android.
License
tanguyantoine/react-native-music-control
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Please usereact-native-track-player instead ✅
Display and manage media controls on lock screen and notification center for iOS and Android.
With Yarn:
yarn add react-native-music-controlor with NPM:
npm install react-native-music-control --savepod install --project-directory=ios/- Enable Audio Background mode in XCode project settings
- Add the
android.permission.FOREGROUND_SERVICEpermission to yourAndroidManifest.xml:<uses-permission android:name="android.permission.FOREGROUND_SERVICE" /> - Set the
launchModeof MainActivity tosingleTaskby adding inAndroidManifest.xml:<activity android:name=".MainActivity" android:launchMode="singleTask">
See here:README-PRE-0.60.md
importMusicControlfrom'react-native-music-control'
ThesetNowPlaying method enables the music controls. To disable them, useresetNowPlaying().
You should call this method after a sound is playing.
For Android's rating system, remove therating 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 withupdatePlayback 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 Onlycolor:0xffffff,// Android Only - Notification Colorcolorized:true,// Android 8+ Only - Notification Color extracted from the artwork. Set to false to use the color property insteaddate:'1983-01-02T00:00:00Z',// Release Date (RFC 3339) - Android Onlyrating: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 iconisLiveStream:true,// iOS Only (Boolean), Show or hide Live Indicator instead of seekbar on lock screen for live streams. Default value is false.})
iOS: Lockscreen
Android: Notification and external devices (smartwatches, cars)
// Basic ControlsMusicControl.enableControl('play',true)MusicControl.enableControl('pause',true)MusicControl.enableControl('stop',false)MusicControl.enableControl('nextTrack',true)MusicControl.enableControl('previousTrack',false)// Changing track position on lockscreenMusicControl.enableControl('changePlaybackPosition',true)// SeekingMusicControl.enableControl('seekForward',false)// iOS onlyMusicControl.enableControl('seekBackward',false)// iOS onlyMusicControl.enableControl('seek',false)// Android onlyMusicControl.enableControl('skipForward',false)MusicControl.enableControl('skipBackward',false)// Android Specific OptionsMusicControl.enableControl('setRating',false)MusicControl.enableControl('volume',true)// Only affected when remoteVolume is enabledMusicControl.enableControl('remoteVolume',false)// iOS Specific OptionsMusicControl.enableControl('enableLanguageOption',false)MusicControl.enableControl('disableLanguageOption',false)
skipBackward andskipForward controls on accept additional configuration options withinterval key:
MusicControl.enableControl('skipBackward',true,{interval:15})MusicControl.enableControl('skipForward',true,{interval:30})
For Android, 5, 10 and 30 is fixed
For iOS, it is dynamic so any number is accepted
You don't need to set all properties when calling theupdatePlayback method, but you should always setelapsedTime for iOS support and better performance on Android.
You don't need to call this method repeatedly to update theelapsedTime -- 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 RateelapsedTime:103,// (Seconds)bufferedTime:200,// Android Only (Seconds)volume:10,// Android Only (Number from 0 to maxVolume) - Only used when remoteVolume is enabledmaxVolume:10,// Android Only (Number) - Only used when remoteVolume is enabledrating: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 pausedMusicControl.updatePlayback({state:MusicControl.STATE_PAUSED,elapsedTime:135,})// Changes the volumeMusicControl.updatePlayback({volume:9,// Android OnlyelapsedTime:167,})
Resets and hides the music controls.
MusicControl.resetNowPlaying()
Resets, hides the music controls and disables everything.
MusicControl.stopControl()
MusicControl.setNotificationId(10,'channel')
If you want to change the default notification id and channel name, call this once before displaying any notifications.
There is also acloseNotification control on Android controls the swipe behavior of the audio playing notification, and accepts additional configuration options with thewhen key:
// Always allow user to close notification on swipeMusicControl.enableControl('closeNotification',true,{when:'always'})// Default - Allow user to close notification on swipe when audio is pausedMusicControl.enableControl('closeNotification',true,{when:'paused'})// Never allow user to close notification on swipeMusicControl.enableControl('closeNotification',true,{when:'never'})
import{Command}from'react-native-music-control'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(Command.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 deviceMusicControl.on(Command.pause,()=>{this.props.dispatch(pauseRemoteControl());})MusicControl.on(Command.stop,()=>{this.props.dispatch(stopRemoteControl());})MusicControl.on(Command.nextTrack,()=>{this.props.dispatch(nextRemoteControl());})MusicControl.on(Command.previousTrack,()=>{this.props.dispatch(previousRemoteControl());})MusicControl.on(Command.changePlaybackPosition,(playbackPosition)=>{this.props.dispatch(updateRemoteControl(playbackPosition));})MusicControl.on(Command.seekForward,()=>{});MusicControl.on(Command.seekBackward,()=>{});MusicControl.on(Command.seek,(pos)=>{});// Android only (Seconds)MusicControl.on(Command.volume,(volume)=>{});// Android only (0 to maxVolume) - Only fired when remoteVolume is enabled// Android Only (Boolean for RATING_HEART or RATING_THUMBS_UP_DOWN, Number for other types)MusicControl.on(Command.setRating,(rating)=>{});MusicControl.on(Command.togglePlayPause,()=>{});// iOS onlyMusicControl.on(Command.enableLanguageOption,()=>{});// iOS onlyMusicControl.on(Command.disableLanguageOption,()=>{});// iOS onlyMusicControl.on(Command.skipForward,()=>{});MusicControl.on(Command.skipBackward,()=>{});// Android OnlyMusicControl.on(Command.closeNotification,()=>{this.props.dispatch(onAudioEnd());})}
Note: Enabling both the 'play' and 'pause' controls will only show one icon -- either a play or a pause icon. The Music Control notification will switch which one is displayed based on the state set via theupdatePlayback method. While the state isMusicControl.STATE_PLAYING it will show the pause icon, and while the state isMusicControl.STATE_PAUSED it will show the play icon.
- Android only supports the intervals 5, 10, & 30, while iOS supports any number
- Make sure when you call
MusicControl.resetNowPlaying()andMusicControl.stopControl()you must have controls enabled otherwise it will create issues - You can also use
Commandconstants inenableControl - The interval value only changes what number displays in the UI, the actual logic to skip forward or backward by a given amount must be implemented in the appropriate callbacks
- Android 10+ does support the seek bar in the notification, but only when meeting specific requirements: setNowPlaying() must be called with a duration value before enabling any controls
- When usingreact-native-sound for audio playback, make sure that on iOS
mixWithOthersis set tofalseinSound.setCategory(value, mixWithOthers). MusicControl will not work on a real device when this is set totrue. - For lockscreen controls to appear enabled instead of greyed out, the accompanying listener for each control that you want to display on the lock screen must contain a valid function:
MusicControl.on(Command.play, () => { // A valid funcion must be present player.play()})It is possible to customize the icon used in the notification on Android. By default you can add a drawable resource to your package with the file namemusic_control_icon and the notification will use your custom icon. If you need to specify a custom icon name, or change your notification icon during runtime, thesetNowPlaying function accepts a string for an Android drawable resource name in thenotificationIcon prop. Keep in mind that just like withmusic_control_icon the resource specified has to be in the drawable package of your Android app.
MusicControl.setCustomNotificationIcon('my_custom_icon')
Of course! We are waiting for your PR :)
About
Display and manage media controls on lock screen and notification center for iOS and Android.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
Uh oh!
There was an error while loading.Please reload this page.