我尝试了许多解决方案来从 URI 播放声音但没有声音输出答案

【问题标题】：I Have tried many solution to play Sound from URI but no sound output我尝试了许多解决方案来从 URI 播放声音但没有声音输出
【发布时间】：2021-09-16 22:51:09
【问题描述】：

我正在尝试制作一个简单的音频按钮所以当你触发按钮时应该播放声音并切换按钮直到现在一切正常但没有声音输出

我正在使用 react-native-sound-player 逻辑方面一些信息 npmPackages：

反应：16.13.1 => 16.13.1
反应原生：0.63.2 => 0.63.2
节点：14.16.1
纱线：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)
    }
  })

那是视角

    <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>
  )
}```

【问题讨论】：

标签： javascript react-native react-hooks

【解决方案1】：

您可以使用“TrackPlayer” Click here to navigate react-native-track-player

安装后

从 'react-native-track-player' 导入 TrackPlayer, {State, Event}；

使用

var track = { url: "Use Your URL here" } // 你也可以使用许多参数，例如“title”、“artist”、“album”、“genre”

TrackPlayer.add([track]); // 添加你的音轨

TrackPlayer.play(); // 可以像这样播放你的曲目。

TrackPlayer.destroy(); // 可以像这样破坏轨道。

TrackPlayer.getPosition().then(result => { “在这里你会得到音频输入的当前播放位置”，结果 });

TrackPlayer.getDuration().then(result => { “在这里您将获得 Total TrackPlayer Duration In”，结果 });

【讨论】：