[Feature Request] Fade in and out

[KrisLau]

What is the need and use case of this feature?
I would love to use this package however I'm having trouble trying to figure out how to dynamically fade out the audio. Ideally, I would love to be able to fade out the audio between the tracks I play and also to fade out when the user starts/stops the audio track. Currently I believe I would need to create a timer that gradually reduces the volume using setVolume?

Describe the ideal solution
My thought is that there could be a fadeIn, fadeOut, and fadeStop props where they would default to 0. So they would all take in a duration which controls how fast the fade happens. fadeStop would basically delay the stop and fade out the music in the duration given .

Describe alternatives you've considered
N/A (I couldn't find any other packages)

Additional context
I'm basically working off the Howler.js structure and simplifying it

How I can Help
Not sure? I can help with documentation maybe?

[jspizziri]

@KrisLau thanks for the request. I have a clarifying question and then some thoughts.

Question

Are you trying to cross fade tracks or simply fade each one in and out?

Thoughts

From my perspective this seems like a valid feature but it falls into the category of "nice-to-have"/non-critical. As such and with the realities of our resources being small and also largely directed at other more critical tasks (see the android rewrite and bugs) the chances of this happening on a short timeline are very slim.

What it's going to require to get it done anytime soon would be a champion willing to do the legwork and put in the time to research and implement.

If you're up for that task then we can:

1. Open a design discussion and approve something that works.
2. Provide guidance in the implementation journey.

[KrisLau]

Question
Are you trying to cross fade tracks or simply fade each one in and out?

The latter! Although I think that this feature might also help with the existing cross fading feature request if I'm understanding that request correctly since I'm thinking that cross fading could just utilize the individual track fading to achieve a cross fade. For example, the first track would just need to set fadeOut and the subsequent tracks would set both fadeIn and fadeOut.

Thoughts

From my perspective this seems like a valid feature but it falls into the category of "nice-to-have"/non-critical. As such and with the realities of our resources being small and also largely directed at other more critical tasks (see the android rewrite and bugs) the chances of this happening on a short timeline are very slim.

What it's going to require to get it done anytime soon would be a champion willing to do the legwork and put in the time to research and implement.

If you're up for that task then we can:

1. Open a design discussion and approve something that works.
2. Provide guidance in the implementation journey.

I would love to however I've never worked on any JavaScript libraries before, how difficult do you think it would be for me as a new-ish JS dev to implement it? If it's not too difficult, I would be more than willing to try my hand at it.

[jspizziri]

@KrisLau thanks for the response.

First, thanks for your willingness to do some work!

There's no special magic to making changes to a library as opposed a normal project you've worked with. The only trick is how you make the changes in a way that you can see them changing things in an app, and for that we have a nice example project with documentation specifically for that purpose.

For JS changes you'd make the changes to the src and then run yarn build && yarn add react-native-track-player@file:.. then refresh/rerun the simulator. I encourage you to play around with it just to prove to yourself that you're capable of doing it (which you are!) I can provide pointers if you want.

Now, specifically regarding this feature. It would likely require more than just JS, as it probably would need some changes or work to be done in the native Swift (iOS) and Kotlin (Android) code. If you're just starting out that might sound intimidating, and there would be a little bit of a learning curve, but with the proper guidance and effort, it's something you can certainly do.

[KrisLau]

@jspizziri Sound good, it sounds a little daunting since I have zero experience in both Swift and Kotlin haha but I'll try and play with it whenever I get some free time and I'll see how it goes!

[jspizziri]

@KrisLau if it makes you feel any better I didn't have any experience in Swift or Kotlin until around a month ago when I submitted this MR. It was my first experience with the "native" side of react-native & Swift/Kotlin. Granted I've been doing software for around a decade at this point so I've gotten fast at getting dangerous enough to be effective with other languages and platforms (not sure what your case is).

If you want to play around I'd recommend starting small and focus just on making a change to either iOS or Kotlin (not both at the same time). Something simple like: see if you can print a log message in XCode when the app runs and some function is called.

[KrisLau]

@jspizziri That's heartening to hear and I'll try that! I'm definitely not as experienced haha I've only been working for a year in React Native or anything mobile. 😆

[lovegaoshi]

While the right way to do this is through volumeshaper as mentioned in z-huang/InnerTune#889 and whatever the ios counterpart , I seem to have hacked out this feature with JS (Animated.Value).

for the kind soul decided to write up a PR for this, this is simply putting any TrackPlayer playback events (TrackPlayer.play/pause/skipnext/skipprevious) as a callback to Animated.timing, and hooking TrackPlayer.setVolume to Animated.Value as a listener.