doublesymmetry / react-native-track-player

A fully fledged audio module created for music apps. Provides audio playback, external media controls, background mode and more!
https://rntp.dev/
Apache License 2.0
3.27k stars 1.01k forks source link

If I select a new track whilst the Player is paused, the previous track plays for ~1 second before the new track starts playing. #1123

Closed willdspd closed 3 years ago

willdspd commented 3 years ago

Describe the bug

In my application, I have a list of tracks that I add to TrackPlayer. When the user clicks one of these tracks (let's call it Track 1) in the UI (as can be seen in the screenshot below) I call the below function to play the track:

const playTrack = (trackId) => {
  await TrackPlayer.skip(trackId);
  await TrackPlayer.play()
  updateTrack(trackId, { isPlaying: true });
}

Then, when a user wants to pause this specific track, I call this function:

const pauseTrack = async (trackId) => {
  await TrackPlayer.pause();
  updateTrack(trackId, { isPlaying: false });
};

This works with no problems. So far so good. Then, if the user clicks another track (let's call it Track 2) to play it, I call this line:

await TrackPlayer.skip(trackId);

This is when the problem occurs. Instead of immediately playing the next track that the user just clicked (Track 2), the Player plays the previous track (Track 1) for approximately 0.5/1 seconds, before playing the correct track (Track 2). Furthermore, this problem also occurs when the user tries to play Track 2 without pausing Track 1 first. Naturally, this is a very poor listening experience for the user.

Separate to this bug, but also relevant to the second use case I just mentioned, is the question of the 'Gapless playback' feature that was part of this release of react-native-track-player in 2018. Naturally, this would solve our issue to some degree (ignoring the fact that audio from Track 1 should never play after Track 2 has been clicked), but obviously, it doesn't seem to be a feature that works out of the box. Is this something we have to set up ourselves? If so, how do we do this? We don't seem to be the only ones asking about this.

To Reproduce

Please follow the steps outlined above. If desired, I can give access to our repo for you to clone our project to check out the problem for yourself.

Environment

System:
    OS: macOS 11.2
    CPU: (4) x64 Intel(R) Core(TM) i5-8210Y CPU @ 1.60GHz
    Memory: 53.98 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 15.8.0 - /usr/local/bin/node
    Yarn: 1.21.1 - ~/.yarn/bin/yarn
    npm: 7.5.0 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    Android SDK:
      API Levels: 29
      Build Tools: 29.0.2, 30.0.3
      System Images: android-28 | Google Play Intel x86 Atom, android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.7042882
    Xcode: 12.4/12D4e - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_282 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: ~0.63.4 => 0.63.4 
    react-native-macos: Not Found

What react-native-track-player version are you using?

1.2.3

Are you testing on a real device or in the simulator? Which OS version are you running?

iOS Simulator

Screenshot of tracks

IOS-SIM

dev-apps-code commented 3 years ago

Same issue here, and sometimes it plays the previous song for a couple of seconds, before playing what was supposed to be playing

dev-apps-code commented 3 years ago

is this still active?

moonstruck commented 3 years ago

is this still active?

https://github.com/react-native-kit/react-native-track-player/issues/1105

milesscherrer commented 3 years ago

This is a major issue for using this package. Currently working around it by pausing with a timeout (800ms), hoping that next track get loaded on skip/skipTo during that time and then playing again. Not optimal as it adds additional pausing between tracks and sometimes previous track can keep playing for a number of seconds still.

Any ideas for how to solve greatly appreciated.

CallumHemsley commented 2 years ago

@dcvz any reason why you closed this? Still seems to be an issue 🤔

komelabbbas commented 1 year ago

issue still occurs plz help

JWesorick commented 1 month ago

I am on 3.2 but this is happening to me. Anyone know if it's fixed in 4.1?

JWesorick commented 1 month ago

I was able to fix my issue by waiting for "connecting" to finish before calling play.

          let asdf;
          do {
            asdf = await TrackPlayer.getState();
          } while (asdf == State.Connecting);