React Native Track Player - Seek to precise position doesn't work

Question

I'm developing a music streaming app that uses React Native Track Player to handle music in app and in the background.

I'm fetching music from a server through Socket.IO and I get all the song as expected.

In this application, the admin can choose to start the streaming and then all the users connected to the app will receive the song and will start on their device. If a user connect when a song is already started, the user will receive the song and the current position. So, if a song is already started, will seek to the current position.

The problem is that not always the seek works. Sometimes it starts from 0, other times in an apparently random position. Only a few times the position seek well.

I thought that the song wasn't buffered completely, but if I try to output the current position and buffered position before and after the seek, it is right.

How could I resolve this? I should wait that all the song is buffered, and then seek?

If this module can't do this, are there other valid modules?

I tested this only on Android for now, idk if on iOS works.

Here the code:

This is the streaming function, listen from the server for songs...

socketStreaming.on("firstSong", async (song) => {
      await TrackPlayer.reset();
      await TrackPlayer.add({
        id: song.id,
        url: song.url,
        title: song.title,
        artist: song.artist,
        artwork: song.artwork,
      });
      console.log(
        `${await TrackPlayer.getBufferedPosition()} - ${await TrackPlayer.getPosition()}`
      );
      await TrackPlayer.getBufferedPosition().then(async () => {
        if (song.seekTo !== undefined) await TrackPlayer.seekTo(~~song.seekTo);
        console.log(
          `${await TrackPlayer.getBufferedPosition()} - ${await TrackPlayer.getPosition()}`
        );
      });
      await TrackPlayer.play();
      console.log(
        `${await TrackPlayer.getBufferedPosition()} - ${await TrackPlayer.getPosition()}`
      );
      setSrcButton(pauseImage);
    });
    socketStreaming.on("nextSong", async (song) => {
      await TrackPlayer.add({
        id: song.id,
        url: song.url,
        title: song.title,
        artist: song.artist,
        artwork: song.artwork,
      });
    });
    socketStreaming.on("seek", async (second) => {
      await TrackPlayer.seekTo(second);
      await TrackPlayer.play();
      setSrcButton(pauseImage);
    });

This is the setup function, that setup the player...

    await TrackPlayer.setupPlayer({
      waitForBuffer: true,
    });
    await TrackPlayer.updateOptions({
      capabilities: [
        TrackPlayer.CAPABILITY_PLAY,
        TrackPlayer.CAPABILITY_PAUSE,
        TrackPlayer.CAPABILITY_SEEK_TO,
      ],
      compactCapabilities: [
        TrackPlayer.CAPABILITY_PLAY,
        TrackPlayer.CAPABILITY_PAUSE,
      ],
      notificationCapabilities: [
        TrackPlayer.CAPABILITY_PLAY,
        TrackPlayer.CAPABILITY_PAUSE,
      ],
    });

Both functions are inside a useEffect(callback, []), so will be called only on startup

Thanks for the help :)

Answer 1

I was stuck with the same problem.

Resolved it by playing the track first and then seek to the required position.

Something like this,

await TrackPlayer.play();
await TrackPlayer.seekTo(second);