使用 react-native-track-player 正确切换播放状态以进行实时音频流 React Native 应用程序shoutcast

问题描述

我似乎无法让 react-native-track-player 在我的广播流应用 (shoutcast) 中完全运行。我用来切换播放的 TouchableOpacity 似乎只在第二次按下后才起作用。即使如此，切换似乎也不能可靠地工作。我想我的逻辑设置不正确..

我也意识到我应该通过 react-native-track-player 更新 MetaData，而不是我编写的自定义钩子。

如果有人能指出我的错误，我将不胜感激！提前致谢?

使用：

• React Native 0.60.5
• react-native-track-player 1.2.4

主屏幕逻辑：

...

  const [playingState,setState] = useState(true)
  const [song,setSong] = useState('');
  const [musician,setMusician] = useState('');
  
  useEffect(() => {
      let repeat;
      async function fetchData() {
          try {
              const res = await fetch(" * my API url ");
              const json = await res.json();
              setSong(json.data[0].track.title);
              setMusician(json.data[0].track.artist);
              repeat = setTimeout(fetchData,26000);
          } catch (error) {
              console.error(error.message)
          }
      }
      fetchData();
      return () => {
          if (repeat) {
              clearTimeout(repeat);
          }
      }
},[]);

var songTitle = JSON.stringify(song)
var musicianName = JSON.stringify(musician)

const playbackState = usePlaybackState();

async function setup() {
  await TrackPlayer.setupPlayer({});
  await TrackPlayer.updateOptions({
    stopWithApp: true,capabilities: [
      TrackPlayer.CAPABILITY_PLAY,TrackPlayer.CAPABILITY_PAUSE,TrackPlayer.CAPABILITY_STOP
    ],compactCapabilities: [
      TrackPlayer.CAPABILITY_PLAY,TrackPlayer.CAPABILITY_PAUSE
    ]
  });
}
  useEffect(() => {
    setup();
  },[]);

  async function togglePlayback() {
    const currentTrack = await TrackPlayer.getCurrentTrack();
    if (currentTrack == null) {
      await TrackPlayer.reset();
      await TrackPlayer.add({ 
        id: 0,title: songTitle,url: " my audio stream URL ",artist: musicianName,album: null,date: null,genre: null}
        );
      await TrackPlayer.play();
    } else {
      if (playbackState === TrackPlayer.STATE_PAUSED) {
        setState(!playingState)
        await TrackPlayer.play();
      } else {
        await TrackPlayer.pause();
      }
    }
  }

...

主屏前端：

...

  <TouchableOpacity
    onPress={() => togglePlayback()}
    style={[
        styles.playButtonContainer,screenData.isLandscape && styles.playButtonContainerLandscape
    ]}>
    {playingState ? (
        <View style={{ alignContent: 'center',justifyContent: 'center' }}>
            <Image
                source={playButton}
                style={styles.playPauseButton}
                resizeMode='contain'
            />
        </View>
    ) : (
            <View style={{ alignContent: 'center',justifyContent: 'center' }}>
                <pulse color='white' numpulses={3} diameter={400} speed={20} duration={2000} 
                 style={{ alignSelf: 'center',opacity: 50,zIndex: 0 }} />
                <Image
                    source={pauseButton}
                    style={styles.playPauseButton}
                    resizeMode='contain'
                />
                <LottieView
                    source={visualizer}
                    autoplay
                    loop
                    style={{
                        zIndex: 1,width: screenWidth,height: 200,position: 'absolute',alignSelf: 'center'
                    }}
                    isPaused={false}
                />
            </View>
        )}
</TouchableOpacity>
{
    playingState ? (
        <Text
            style={styles.trackTitle}>{''}</Text>
    ) : (
            <Text
                style={styles.trackTitle}>{song}</Text>
        )
}
{
    playingState ? (
        <Text style={styles.tuneInTitle}>Tap the play button to tune in</Text>
    ) : (
            <Text style={styles.artistName}>{musician}</Text>
        )
}

...

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）