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

用户名

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

我正在使用react-native-audio-recorder-player在我的应用程序中录制和播放音频。检查应用程序设计

我的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)
    }
}

`

休息码

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();
};
雷诺

截至v2.4.3,它不是react-native-audio-recorder-player的功能(请参阅https://github.com/dooboolab/react-native-audio-recorder-player/issues/130

但是我必须自己做,因此这是我设法做到的方式:

  • 要点是让所有播放器(或商店,如redux或react context)的父组件知道播放器的状态(播放器在读取声音吗?是哪个?)

  • 然后,当播放器播放声音时,它将调用父级组件,并且父级组件将停止当前正在播放的任何其他播放器-必须按一定顺序进行操作以避免奇怪的行为

这是我的简化代码:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在Node.js中实现简单的音频播放?

来自分类Dev

如何在Surfaceview中隐藏视频并保持音频播放

来自分类Dev

如何录制耳机中播放的Android音频

来自分类Dev

如何同时播放多个音频文件

来自分类Dev

Objective-C:如何在DiracLE中控制多个音频播放器的音量

来自分类Dev

如何在表格中显示WordPress音频播放器

来自分类Dev

如何在榆木中播放音频

来自分类Dev

如何使用ionic Media插件顺序播放多个音频

来自分类Dev

如何添加多个彼此停止的音频播放按钮?

来自分类Dev

如何在react native中显示带有react native视频的多个视频?

来自分类Dev

React-Native音频播放器中的传递功能

来自分类Dev

如何在语音通道中播放特定的音频文件?

来自分类Dev

React Native:如何在FlatList中播放视频

来自分类Dev

如何在不使用按钮的情况下在React中播放音频文件?

来自分类Dev

如何使用js音频api播放多个音频

来自分类Dev

如何在Winrt中播放重叠的音频?

来自分类Dev

如何在Firefox中播放音频和视频流?

来自分类Dev

如何防止播放多个直播音频?

来自分类Dev

如何在Flash视频中循环播放音频?

来自分类Dev

如何在Qmmp播放器中打开音频CD?

来自分类Dev

如何在听筒中播放网络音频

来自分类Dev

如何在 ios 中播放 .opus 音频文件

来自分类Dev

如何在 php 中播放音频剪辑?

来自分类Dev

Java 如何停止播放多个音频循环

来自分类Dev

如何使用javascript随机播放音频标签中的多个音频文件?

来自分类Dev

如何在python中播放实时音频同时不断录制?

来自分类Dev

如何在 JAR 文件中播放音频?

来自分类Dev

音频无法在 React 中播放

来自分类Dev

如何在 react-native 中播放音频?

Related 相关文章

热门标签

归档