Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all articles
Browse latest Browse all 28476

How to Play Multiple Audio's in React Native?

$
0
0

I want to play multiple audio files in my React Native application. Currently, it is one audio at a time and i also want single audio to be played at a time. What I want is if one audio is playing and suddenly the user tapped on the second audio button the first one will get paused and second should play. And when the user tapped the first again the paused audio will start again from where it is paused. Similar to whatsapp Audio Messages.

I am using react-native-audio-recorder-player for recording and playing audio in my application. check app design

My FlatList Item Design:

{ { 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 Function:

`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 CODE

audioRecorderPlayer = new 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();
};

Viewing all articles
Browse latest Browse all 28476

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>