React-Native-TrackPlayer does not update new song

Question

I am creating a player app which has list of multiple tracks. I am showing multiple audio cards in a list and user can play any of those by pressing play button but when I click any of track it plays only first one and time and slider works for that track on all cards.

So, I have created 5 cards and first card has song abc.mp3 with 5:06 length then if I click play button from any of card it plays abc.mp3 and 5:06 length on all cards and card got updated based on that.

code for my card.js where I initialised player and added song in track:

 const playLiveAudio = async () => {
console.log('live audio playing ');

if (Platform.OS === 'ios') {
  await TrackPlayer.reset();
}

if (Platform.OS === 'android') {
  await TrackPlayer.setupPlayer();
}

await TrackPlayer.add({
  id: item.cardId,
  url: item.audio,
  title: item.title,
  artist: item.title,
  artwork: item.image,
});

// await TrackPlayer.play();
// isPlayerReady.current = true;
};


  useFocusEffect(
React.useCallback(() => {
  if (Platform.OS === 'ios') {
    AppPlayer.initializePlayer();
    // playAudio();
  }

  setPlayerState('paused');

  return () => {
    // TrackPlayer.stop();

    if (Platform.OS === 'ios') {
      TrackPlayer.reset();
    }
    TrackPlayer.reset();
  };
}, []),

);

after That I am showing audio controller on card.js

       <AudioCardPlayController
              playerState={playerState}
              index={index}
              previewMode={previewMode}
            />

AudioCardPlayController.js code where I am having play-pause button and slider which maintains progress and time

       export default function AudioCardPlayController({
      playerState,
     index,
     previewMode,
   }) {
     const playbackState = usePlaybackState();

     seEffect(() => {
getStateOfPlayer();

if (isPlaying === 'playing') {
  setIsPlaying('playing');
} else if (isPlaying === 'paused') {
  setIsPlaying('paused');
} else {
  setIsPlaying('loading');
}

console.log(' player current state ', playbackState, isPlaying);
}, [playbackState, isPlaying]);

const returnPlayBtn = () => {
  switch (isPlaying) {
  case 'playing':
    return <SvgPause />;

  case 'paused':
    return <SvgPlay />;

  case 'loading':
    return <SvgPlay />;
  default:
    return <SvgPause />;
}
};

const onPlayPause = () => {
  if (isPlaying === 'playing') {
   console.log('Go to pause state ');
   TrackPlayer.pause();
    setIsPlaying('paused');
  } else if (isPlaying === 'paused') {
    TrackPlayer.play();
     setIsPlaying('playing');

    console.log('Go to play state ');

     } else if (isPlaying === 'loading') {
        console.log('audio loading for playback', playbackState,   isPlaying);

    if (
      (playbackState === 'ready' || playbackState === 'connecting') &&
     isPlaying === 'loading'
  ) {
    TrackPlayer.play();
    setIsPlaying('playing');
    }
  }
};

const getStateOfPlayer = async () => {
   const state = await TrackPlayer.getState();

  console.log('track player state', state, index);
 };

return (
  <View
  style={{
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    }}>
    <TouchableOpacity onPress={onPlayPause}>
    {returnPlayBtn()}
    </TouchableOpacity>

   <SliderComp index={index} />
  </View>
  );
 }

AppPlayer.js

   import TrackPlayer from 'react-native-track-player';

  class AppPlayer {
  static selectedTrack = TrackPlayer.Track | null;

  static initializePlayer = async () => {
    try {
     TrackPlayer.updateOptions({
      stopWithApp: true, 
   
       capabilities: [
      TrackPlayer.CAPABILITY_PLAY,
      TrackPlayer.CAPABILITY_PAUSE,
      TrackPlayer.CAPABILITY_STOP,
      TrackPlayer.CAPABILITY_SEEK_TO,
      ],
    // Capabilities that will show up when the notification is in the compact form on Android
      compactCapabilities: [
      TrackPlayer.CAPABILITY_PLAY,
      TrackPlayer.CAPABILITY_PAUSE,
      TrackPlayer.CAPABILITY_STOP,
      TrackPlayer.CAPABILITY_SEEK_TO,
    ],
     });

    await TrackPlayer.setupPlayer();
  } catch (e) {
  console.log(e);
  // to-do handle error
  }
   };


    }

  export default AppPlayer;

Please help me to understand what is wrong with my track player why its not updating unique track for each card

React-Native-TrackPlayer does not update new song

0 Answers0