how to add react native expo Av seek bar

Question

I was building a music app in react native expo cli using expo av package I have built the basic funtionality like playing and pause. Now I want to implement seek bar but I'm not sure How I can do that?

Please have a look at this code and please tell me how I can implement the seek bar

 const Controller = () => {
  const [sound, setSound] = useState();
  const [isPlaying, setisPlaying] = useState();
  const [currentIndex, setCurrentIndex] = useState(0);

  async function playSound() {
    console.log("Loading Sound");
    const source = { uri: audioBookPlaylist[currentIndex].uri };
    const { sound } = await Audio.Sound.createAsync(
      source,
      onPlaybackStatusUpdate
    );
    setSound(sound);
    setisPlaying(true);
    sound.playAsync();
    console.log("song loaded");
  }

  useEffect(() => {
    playSound();
    console.log(currentIndex);
  }, []);

  const Playpause = async () => {
    isPlaying ? await sound.pauseAsync() : await sound.playAsync();
    setisPlaying(!isPlaying);
    onPlaybackStatusUpdate();
    // console.log(status);
  };

  const handleNextTrack = async () => {
    if (sound) {
      await sound.unloadAsync(setisPlaying(!isPlaying));
      setCurrentIndex(
        currentIndex + 1 > audioBookPlaylist.length - 1 ? 0 : currentIndex + 1
      );
      await playSound();
    }
    elseif;
    console.log(currentIndex);
  };

  const handlePreviousTrack = async () => {
    if (sound) {
      await sound.unloadAsync(setisPlaying(false));
      setCurrentIndex(
        currentIndex === 0 ? audioBookPlaylist.length - 1 : currentIndex - 1
      );
      await playSound();
    }
    console.log(currentIndex);
    sound ? await sound.playAsync() : null;
  };

This is view

return (
        <View style={style.container}>
          <View style={style.titlecontainer}>
            <Text style={style.title}>The Grid: Dat Punk</Text>
            <TouchableOpacity>
              <CsIcons name="Like" size={30} color="white" />
            </TouchableOpacity>
          </View>
          <Slider
            style={{ width: 200, height: 40 }}
            minimumValue={0}
            maximumValue={1}
            minimumTrackTintColor="#FFFFFF"
            maximumTrackTintColor="#000000"
          />
          <View style={style.controllers}>
            <TouchableOpacity>
              <CsIcons name="Shuffle" size={20} color="white" />
            </TouchableOpacity>
            <TouchableOpacity onPress={handlePreviousTrack}>
              <CsIcons name="Previous" size={50} color="white" />
            </TouchableOpacity>
            <TouchableOpacity onPress={Playpause}>
              {isPlaying ? (
                <CsIcons name="Peuse" size={80} color="white" />
              ) : (
                <CsIcons name="Play" size={80} color="white" />
              )}
            </TouchableOpacity>
            <TouchableOpacity>
              <CsIcons
                name="Next"
                size={50}
                color="white"
                onPress={handleNextTrack}
              />
            </TouchableOpacity>
            <TouchableOpacity>
              <CsIcons name="Repeat" size={20} color="white" />
            </TouchableOpacity>
          </View>
    
          <View style={style.bottomcontroller}>
            <TouchableOpacity>
              <CsIcons name="Share" size={20} color="white" />
            </TouchableOpacity>
            <TouchableOpacity>
              <CsIcons name="Sort-by" size={20} color="white" />
            </TouchableOpacity>
          </View>
        </View>
      );
    };

Please help me solve this problem How I can do this

Thanks

how to add react native expo Av seek bar

0 Answers0