Question

我想在我的React Native应用程序中播放多个音频文件。目前，一次只播放一种音频，我也希望一次播放一次。我想要的是，如果正在播放一个音频，并且用户突然点击第二个音频按钮，则第一个音频将暂停，第二个应该播放。当用户再次轻按时，暂停的音频将从暂停的位置重新开始。类似于whatsapp音频消息。

我正在使用 react-native-audio-recorder-player 在我的应用程序中录制和播放音频。 check app design

我的FlatList项目设计：

{{this.toggleMediaPlayer（item.audiourl，index）}}}>

                                            <TouchableOpacity
                                                style={styles.viewBarWrapper}
                                                onPress={this.onStatusPress}
                                            >
                                                <View style={styles.viewBar}>
                                                    <View style={styles.viewBarPlay} />
                                                </View>
                                            </TouchableOpacity>
                                            <Text style={styles.txtCounter}>
                                                {/* {this.state.playTime} / {this.state.duration} */}
                                            </Text>

                                        </View>

MediaPlayer功能：

`toggleMediaPlayer（mediaPath，index）{

    if (this.state.mediaFlag[index] == false) {
        this.onStartPlay(mediaPath, index)

        this.state.mediaFlag[index] = true;
        var cloneObj = Object.assign({}, this.state.mediaFlag);
        this.setState({ mediaFlag: cloneObj });
        console.log(this.state.mediaFlag)

    }
    else {
        this.onPausePlay(mediaPath)
        this.state.mediaFlag[index] = false;
        var cloneObj = Object.assign({}, this.state.mediaFlag);
        this.setState({ mediaFlag: cloneObj });
        console.log(this.state.mediaFlag)
    }
}

`

REST密码

audioRecorderPlayer =新的AudioRecorderPlayer（）;

async onStartPlay(path, index) {
    console.log('onStartPlay');
    this.audioRecorderPlayer.stopPlayer();
    const msg = await this.audioRecorderPlayer.startPlayer(path);
    console.log(msg);
    this.audioRecorderPlayer.addPlayBackListener(async (e) => {
        if (e.current_position === e.duration) {
            console.log('finished');
            // await this.setState({ mediaFlag: !this.state.mediaFlag });

            this.state.mediaFlag[index] = false;
            var cloneObj = Object.assign({}, this.state.mediaFlag);
            this.setState({ mediaFlag: cloneObj });
            console.log(this.state.mediaFlag)

            this.audioRecorderPlayer.stopPlayer();
            this.audioRecorderPlayer.removePlayBackListener();
        }
        else {
            this.setState({
                currentPositionSec: e.current_position,
                currentDurationSec: e.duration,
                playTime: this.audioRecorderPlayer.mmssss(Math.floor(e.current_position)),
                duration: this.audioRecorderPlayer.mmssss(Math.floor(e.duration)),
            })
        }
        return;
    });
};

onPausePlay = async () => {
    await this.audioRecorderPlayer.pausePlayer();
};

async onStopPlay(index) {
    console.log('onStopPlay');
    this.audioRecorderPlayer.stopPlayer();
    this.audioRecorderPlayer.removePlayBackListener();
};

Answer 1

从v2.4.3开始，它不是 react-native-audio-recorder-player 的功能（请参阅https://github.com/dooboolab/react-native-audio-recorder-player/issues/130）

但是我必须自己做，所以这是我设法做到的方式：

主要要点是让所有播放器（或商店，如redux或react上下文）的父组件知道播放器的状态（播放器在读取声音吗？是哪个？）
然后，当播放器播放声音时，它将调用父组件，并且父组件将停止当前正在播放的任何其他播放器-必须按一定的顺序进行操作，以避免出现奇怪的行为
< / li>

这是我的简化代码：

const ParentComponent = () => {
  const [playerRecording, setPlayerRecording] = useState(false); // Which recording is currently playing?

  const onPlay = async (onStartPlay, playerId) => {
    // No player are reading or it is the same player
    if (!playerRecording || playerRecording === playerId) 
      return onStartPlay();

    // Another player is reading - stop it before starting the new one
    audioRecorderPlayer.removePlayBackListener();
    await audioRecorderPlayer.resumePlayer();
    await audioRecorderPlayer.stopPlayer();
    // Start the new player
    onStartPlay();
  };
}

const PlayerComponent = ({onPlay, setPlayerRecording, playerId}) => {
  const onStartPlay = async () => {
    setPlayerRecording(playerId);
    audioRecorderPlayer.startPlayer(path);
    ...
  }

  return (
    <PlayButton onPress={() => onPlay(onStartPlay, playerId)} />
  )
}

如何在React Native中播放多个音频？

1 个答案: