react-native - 如何在 native react 中停止音频文件并自动播放 expo 应用程序中的下一个文件？

Question

我正在使用 Expo 音频在我的 iPhone 上测试我的 react native 应用程序并且遇到了一些问题。

我这里有多个音频文件:

constructor(props) {
super(props);

this.sets = [
    {
        'name': 'Get started', 
        'image': 'https://media2.giphy.com/media/L3txcnbi3ODhV8XbcC/giphy.gif?cid=ecf05e4753ab0311a208263dfa2f06b292304586b6968cd5&rid=giphy.gif',
        'audio_file': 'https://www.buzzsprout.com/919750/2968663-rowing-test-2.mp3'
    },
    {
        'name': '5 pushups', 
        'image': 'https://media3.giphy.com/media/3ohze1qkqPZHMrEuwo/giphy.gif?cid=ecf05e477ee256ccf5c259848c5d44eb07cea572a4b05e29&rid=giphy.gif',
        'audio_file': 'https://www.buzzsprout.com/919750/2946361.mp3'
    },
    {
        'name': '10 burpees', 
        'image': 'https://media1.giphy.com/media/23hPPMRgPxbNBlPQe3/giphy.gif?cid=ecf05e476831df96aaeea2281fa09fb198d9ca8b14f8405c&rid=giphy.gif',
        'audio_file': 'https://www.buzzsprout.com/919750/2946361.mp3'
    }
]

this.state = {
    index: 0,
    isPlaying: false,
    playbackInstance: null,
    currentIndex: 0,
    volume: 1.0,
    isBuffering: false,
    value:0,
    isLooping: true
}
}

我有一个应该播放当前文件的播放按钮。按下时，暂停按钮显示然后暂停音频文件。此功能工作正常。

但是，我也希望用户能够转到下一个轨道。当用户按下下一个按钮时，我希望当前音频停止，转到下一个轨道，并立即开始轨道。我很难做到这一点。目前发生的事情是我点击下一个，继续播放相同的音频，然后当我再次按下播放时，下一个音频文件在原始文件的顶部播放。我该如何解决这个问题？

nextWorkout = async () => {



        const { isPlaying, playbackInstance } = this.state


        isPlaying
          ? await playbackInstance.pauseAsync()
          : await playbackInstance.playAsync()

        // go to next track
        this.setState({
          isPlaying: !isPlaying,
          index:this.state.index + 1
        })

        // load next audio file
        this.loadAudio()
            .then(playbackInstance.playAsync());

        // play next audio file
        // playbackInstance.playAsync();

        // scroll to image in horizontal flatlist
        // this.flatListRef.scrollToIndex({animated: true, index: this.state.index});

    }

    async componentDidMount() {
        _isMounted = true;
        try {
          await Audio.setAudioModeAsync({
            allowsRecordingIOS: false,
            interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_MIX_WITH_OTHERS,
            playsInSilentModeIOS: true,
            interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DUCK_OTHERS,
            shouldDuckAndroid: true,
            staysActiveInBackground: true, // https://github.com/expo/expo/issues/5472
            playThroughEarpieceAndroid: true
          })
          this.loadAudio()
        } catch (e) {
          console.log(e)
        }
      }

    async componentWillUnmount() {
        _isMounted = false;
        this.state.playbackInstance.unloadAsync();

    }

      async loadAudio() {
        const {currentIndex, isPlaying, volume} = this.state
        try {
          const playbackInstance = new Audio.Sound()
          const source = {
            uri: this.sets[this.state.index].audio_file
          }
          const status = {
            shouldPlay: isPlaying,
            volume
          }
          playbackInstance.setOnPlaybackStatusUpdate(this.onPlaybackStatusUpdate)
          await playbackInstance.loadAsync(source, status, false)
          this.setState({playbackInstance})
          } catch (e) {
            console.log(e)
          }
      }

      onPlaybackStatusUpdate = status => {
        this.setState({
          isBuffering: status.isBuffering
        })
      }

      handlePlayPause = async () => {
        const { isPlaying, playbackInstance } = this.state
        isPlaying
          ? await playbackInstance.pauseAsync()
          : await playbackInstance.playAsync()
        this.setState({
          isPlaying: !isPlaying
        })
      }

Answer 1

try {
    await this.state.playbackInstance.unloadAsync()
    await this.state.playbackInstance.loadAsync({uri: this.sets[this.state.index].audio_file});
    await this.state.playbackInstance.playAsync();
    await this.setState({
        isPlaying: true
      })
  } catch (err) {
    console.warn("Couldn't Play audio", err)
  }