I Have tried many solution to play Sound from URI but no sound output

Question

I am tring to make a simple audio button So when u trigger the button should play the sound and toggle the button until now everything works fine but no sound output

I am using react-native-sound-player logic side some informations npmPackages:

• react: 16.13.1 => 16.13.1
• react-native: 0.63.2 => 0.63.2
• Node: 14.16.1
• Yarn: 1.22.10
• npm: 6.14.12

  const [isPlaying, setIsPlaying] = useState(false);
  const [loadFinished, setloadFinshid] = useState(false);

  const loadURI = async () => {
    if (props.uri !== '') {
      try {
        await SoundPlayer.loadUrl(props.uri)
        const onFinishedLoadingURLSubscription = SoundPlayer.addEventListener('FinishedLoadingURL', ({ success, url }) => {
          if (success) {
            setloadFinshid(true)
          }
        })
      } catch (error) {
        console.log(e)
      }
    }
  }
  useEffect(() => {

    if (isPlaying) {
      console.log('A')
      playURI()
    } else {
      console.log('B')
    }
    loadURI()
    return () => {
      Toast.hide()
      SoundPlayer.stop()
      onFinishedPlayingSubscription.remove();
    }
  }, [props.uri, isPlaying])

 
  const playURI = () => {

    if (loadFinished) {
      try {
        SoundPlayer.play(props.uri)
      }
      catch (e) {
        console.log(e)
      }
    }
  }
  const Next = () => {
    SoundPlayer.stop()
    setIsPlaying(false)
    props.navigation.navigate('stepOne', { props })
  }
  const stopSound = () => {
    SoundPlayer.stop()
  }
  const onFinishedPlayingSubscription = SoundPlayer.addEventListener('FinishedPlaying', ({ success }) => {
    if (success) {
      setIsPlaying(false)
    }
  })

That's the view side

    <View style={styles.wrapper}>
      <Header pointer={1} navigation={props.navigation} />
      <View style={styles.top}>
        <Image source={require('../../assets/listen.png')} style={styles.image} />
      </View>
      <View style={styles.bottom}>
        <Text style={styles.title}>{props.title}</Text>
        <View style={styles.btnHandler}>
          {
            !loadFinished ?
              <ActivityIndicator size="large" color="#fff" />
              :
              <>
                {!isPlaying ?
                  <Icone.Button
                    name="play"
                    backgroundColor="transparent"
                    color="#fff"
                    iconStyle={{ marginRight: 0 }}
                    onPress={() => setIsPlaying(true)}
                    style={styles.btn}
                  ></Icone.Button>
                  :
                  <Icone.Button
                    name="pause"
                    backgroundColor="transparent"
                    color="#fff"
                    iconStyle={{ marginRight: 0 }}
                    onPress={() => setIsPlaying(false)}
                    style={styles.btn}
                  ></Icone.Button>
                }
              </>
          }
        </View>
      </View>
      <NextButton data={props} onPress={Next} />
    </View>
  )
}```

Answer 1

You can use "TrackPlayer" Click here to navigate react-native-track-player

After Installing

import TrackPlayer, {State, Event} from 'react-native-track-player';

Use

var track = { url: "Use Your URL here" } // Your can also use many Parameters like "title", "artist", "album", "genre"

TrackPlayer.add([track]); // Add your Track

TrackPlayer.play(); // Can play your Track Like this.

TrackPlayer.destroy(); // Can Destroy the Track Like this.

TrackPlayer.getPosition().then(result => { "here you will get the current Playing Position of Audio In", result });

TrackPlayer.getDuration().then(result => { "here you will get the Total TrackPlayer Duration In", result });