title: How to Play Multiple Audio's in React Native?
body: <p>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.</p>
  
  <p>I am using <strong>react-native-audio-recorder-player</strong> for recording and playing audio in my application.
  <a href="https://i.stack.imgur.com/73Bh1.png" rel="nofollow noreferrer">check app design</a></p>
  
  <p>My FlatList Item Design:</p>
  
  <p>
   { { this.toggleMediaPlayer(item.audiourl, index) } }}>
                                                      
                                                  </p>
  
  <pre><code>                                            &lt;TouchableOpacity
                                                  style={styles.viewBarWrapper}
                                                  onPress={this.onStatusPress}
                                              &gt;
                                                  &lt;View style={styles.viewBar}&gt;
                                                      &lt;View style={styles.viewBarPlay} /&gt;
                                                  &lt;/View&gt;
                                              &lt;/TouchableOpacity&gt;
                                              &lt;Text style={styles.txtCounter}&gt;
                                                  {/* {this.state.playTime} / {this.state.duration} */}
                                              &lt;/Text&gt;
  
                                          &lt;/View&gt;
  </code></pre>
  
  <p><strong>MediaPlayer Function:</strong></p>
  
  <blockquote>
    <p>`toggleMediaPlayer(mediaPath, index) {</p>
  </blockquote>
  
  <pre><code>    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)
      }
  }
  </code></pre>
  
  <p>`</p>
  
  <p><strong>REST CODE</strong></p>
  
  <blockquote>
    <p>audioRecorderPlayer = new AudioRecorderPlayer();</p>
  </blockquote>
  
  <pre><code>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) =&gt; {
          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 () =&gt; {
      await this.audioRecorderPlayer.pausePlayer();
  };
  
  async onStopPlay(index) {
      console.log('onStopPlay');
      this.audioRecorderPlayer.stopPlayer();
      this.audioRecorderPlayer.removePlayBackListener();
  };
  </code></pre>