feat: volume fade in/out

android/build.gradle

@@ -50,7 +50,7 @@ repositories {
 }
 
 dependencies {
-    implementation 'com.github.doublesymmetry:kotlinaudio:v2.1.0'
+    implementation 'com.github.lovegaoshi:KotlinAudio:v2.0.0-fade5'
     // used when building against local maven
 //    implementation "com.github.doublesymmetry:kotlin-audio:2.1.0"
 

android/src/main/java/com/doublesymmetry/trackplayer/module/MusicEvents.kt

@@ -45,6 +45,7 @@ class MusicEvents(private val reactContext: ReactContext) : BroadcastReceiver()
         const val PLAYBACK_METADATA = "playback-metadata-received"
         const val PLAYBACK_PROGRESS_UPDATED = "playback-progress-updated"
         const val PLAYBACK_ERROR = "playback-error"
+        const val PLAYBACK_ANIMATED_VOLUME_CHANGED = "playback-animated-volume-changed"
 
         // Metadata Events
         const val METADATA_CHAPTER_RECEIVED = "metadata-chapter-received"

android/src/main/java/com/doublesymmetry/trackplayer/module/MusicModule.kt

@@ -626,4 +626,39 @@ class MusicModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaM
         if (verifyServiceBoundOrReject(callback)) return@launch
         callback.resolve(Arguments.fromBundle(musicService.getPlayerStateBundle(musicService.state)))
     }
+
+    @ReactMethod
+    fun setAnimatedVolume(volume: Float = 1f, duration: Int = 0, interval: Int = 20, msg: String = "", callback: Promise) = scope.launch {
+        if (verifyServiceBoundOrReject(callback)) return@launch
+        musicService.setAnimatedVolume(volume, duration.toLong(), interval.toLong(), msg).await()
+        callback.resolve(null)
+    }
+
+    @ReactMethod
+    fun fadeOutPause(duration: Int = 0, interval: Int = 20, callback: Promise) = scope.launch {
+        if (verifyServiceBoundOrReject(callback)) return@launch
+        musicService.fadeOutPause(duration.toLong(), interval.toLong())
+        callback.resolve(null)
+    }
+
+    @ReactMethod
+    fun fadeOutNext(duration: Int = 0, interval: Int = 20, toVolume: Float = 1f, callback: Promise) = scope.launch {
+        if (verifyServiceBoundOrReject(callback)) return@launch
+        musicService.fadeOutNext(duration.toLong(), interval.toLong(), toVolume)
+        callback.resolve(null)
+    }
+
+    @ReactMethod
+    fun fadeOutPrevious(duration: Int = 0, interval: Int = 20, toVolume: Float = 1f, callback: Promise) = scope.launch {
+        if (verifyServiceBoundOrReject(callback)) return@launch
+        musicService.fadeOutPrevious(duration.toLong(), interval.toLong(), toVolume)
+        callback.resolve(null)
+    }
+
+    @ReactMethod
+    fun fadeOutJump(index: Int, duration: Int = 0, interval: Int = 20, toVolume: Float = 1f, callback: Promise) = scope.launch {
+        if (verifyServiceBoundOrReject(callback)) return@launch
+        musicService.fadeOutJump(index, duration.toLong(), interval.toLong(), toVolume)
+        callback.resolve(null)
+    }
 }

android/src/main/java/com/doublesymmetry/trackplayer/service/MusicService.kt

@@ -407,6 +407,44 @@ class MusicService : HeadlessJsTaskService() {
         player.volume = value
     }
 
+    @MainThread
+    fun setAnimatedVolume(value: Float, duration: Long = 500L, interval: Long = 20L, emitEventMsg: String = ""): Deferred<Unit> {
+        val eventMsgBundle = Bundle()
+        eventMsgBundle.putString(DATA_KEY, emitEventMsg)
+        return player.fadeVolume(value, duration, interval) {
+            emit(
+                MusicEvents.PLAYBACK_ANIMATED_VOLUME_CHANGED,
+                eventMsgBundle
+            )
+        }
+    }
+
+    fun fadeOutPause (duration: Long = 500L, interval: Long = 20L) {
+        player.fadeVolume(0f, duration, interval) {
+            player.pause()
+        }
+    }
+
+    fun fadeOutNext (duration: Long = 500L, interval: Long = 20L, toVolume: Float = 1f) {
+        player.fadeVolume(0f, duration, interval) {
+            player.next()
+            player.fadeVolume(toVolume, duration, interval)
+        }
+    }
+
+    fun fadeOutPrevious (duration: Long = 500L, interval: Long = 20L, toVolume: Float = 1f) {
+        player.fadeVolume(0f, duration, interval) {
+            player.previous()
+            player.fadeVolume(toVolume, duration, interval)
+        }
+    }
+
+    fun fadeOutJump (index: Int, duration: Long = 500L, interval: Long = 20L, toVolume: Float = 1f) {
+        player.fadeVolume(0f, duration, interval) {
+            player.jumpToItem(index)
+            player.fadeVolume(toVolume, duration, interval)
+        }
+    }
     @MainThread
     fun getDurationInSeconds(): Double = player.duration.toSeconds()
 

example/src/components/PlayPauseButton.tsx

@@ -11,13 +11,24 @@ import FontAwesome6 from 'react-native-vector-icons/FontAwesome6';
 export const PlayPauseButton: React.FC = () => {
   const { playing, bufferingDuringPlay } = useIsPlaying();
 
+  const onFadeOutPause = () => {
+    TrackPlayer.fadeOutPause();
+  };
+
+  const onFadeInPlay = () => {
+    TrackPlayer.play();
+    TrackPlayer.setAnimatedVolume({
+      volume: 1,
+    });
+  };
+
   return (
     <View style={styles.container}>
       {bufferingDuringPlay ? (
         <ActivityIndicator />
       ) : (
         <TouchableWithoutFeedback
-          onPress={playing ? TrackPlayer.pause : TrackPlayer.play}
+          onPress={playing ? onFadeOutPause : onFadeInPlay}
         >
           <FontAwesome6
             name={playing ? 'pause' : 'play'}

example/src/components/PlayerControls.tsx

@@ -6,8 +6,8 @@ import FontAwesome6 from 'react-native-vector-icons/FontAwesome6';
 import { PlaybackError } from './PlaybackError';
 import { PlayPauseButton } from './PlayPauseButton';
 
-const performSkipToNext = () => TrackPlayer.skipToNext();
-const performSkipToPrevious = () => TrackPlayer.skipToPrevious();
+const performSkipToNext = () => TrackPlayer.fadeOutNext();
+const performSkipToPrevious = () => TrackPlayer.fadeOutPrevious();
 
 export const PlayerControls: React.FC = () => {
   const playback = usePlaybackState();

example/src/constant.ts

@@ -0,0 +1,5 @@
+export enum FadeEvent {
+  FadePause = 'FadePause',
+  FadeNext = 'FadeNext',
+  FadePrevious = 'FadePrevious',
+}

example/src/services/PlaybackService.ts

@@ -3,22 +3,25 @@ import TrackPlayer, { Event } from 'react-native-track-player';
 export async function PlaybackService() {
   TrackPlayer.addEventListener(Event.RemotePause, () => {
     console.log('Event.RemotePause');
-    TrackPlayer.pause();
+    TrackPlayer.fadeOutPause();
   });
 
   TrackPlayer.addEventListener(Event.RemotePlay, () => {
     console.log('Event.RemotePlay');
     TrackPlayer.play();
+    TrackPlayer.setAnimatedVolume({
+      volume: 1,
+    });
   });
 
   TrackPlayer.addEventListener(Event.RemoteNext, () => {
     console.log('Event.RemoteNext');
-    TrackPlayer.skipToNext();
+    TrackPlayer.fadeOutNext();
   });
 
   TrackPlayer.addEventListener(Event.RemotePrevious, () => {
     console.log('Event.RemotePrevious');
-    TrackPlayer.skipToPrevious();
+    TrackPlayer.fadeOutPrevious();
   });
 
   TrackPlayer.addEventListener(Event.RemoteJumpForward, async (event) => {
@@ -76,6 +79,10 @@ export async function PlaybackService() {
     console.log('Event.MetadataCommonReceived', event);
   });
 
+  TrackPlayer.addEventListener(Event.PlaybackAnimatedVolumeChanged, (event) => {
+    console.log('Event.PlaybackAnimatedVolumeChanged', event.data);
+  });
+
   TrackPlayer.addEventListener(Event.PlaybackProgressUpdated, (event) => {
     console.log('Event.PlaybackProgressUpdated', event);
   });

src/constants/Event.ts

@@ -5,6 +5,8 @@ export enum Event {
   PlaybackState = 'playback-state',
   /** Fired when a playback error occurs. */
   PlaybackError = 'playback-error',
+  /** (Android Only) Fired when animated volume completed changing. */
+  PlaybackAnimatedVolumeChanged = 'playback-animated-volume-changed',
   /** Fired after playback has paused due to the queue having reached the end. */
   PlaybackQueueEnded = 'playback-queue-ended',
   /**

src/interfaces/events/EventPayloadByEvent.ts

@@ -19,6 +19,7 @@ import type { RemotePlaySearchEvent } from './RemotePlaySearchEvent';
 import type { RemoteSeekEvent } from './RemoteSeekEvent';
 import type { RemoteSetRatingEvent } from './RemoteSetRatingEvent';
 import type { RemoteSkipEvent } from './RemoteSkipEvent';
+import type { PlaybackAnimatedVolumeChangedEvent } from './PlaybackAnimatedVolumeChangedEvent';
 
 export type EventPayloadByEvent = {
   [Event.PlayerError]: PlayerErrorEvent;
@@ -46,6 +47,7 @@ export type EventPayloadByEvent = {
   [Event.RemoteLike]: never;
   [Event.RemoteDislike]: never;
   [Event.RemoteBookmark]: never;
+  [Event.PlaybackAnimatedVolumeChanged]: PlaybackAnimatedVolumeChangedEvent;
   [Event.MetadataChapterReceived]: AudioMetadataReceivedEvent;
   [Event.MetadataTimedReceived]: AudioMetadataReceivedEvent;
   [Event.MetadataCommonReceived]: AudioCommonMetadataReceivedEvent;

src/interfaces/events/PlaybackAnimatedVolumeChangedEvent.ts

@@ -0,0 +1,4 @@
+export interface PlaybackAnimatedVolumeChangedEvent {
+  /** the event message */
+  data: string;
+}