How to Play Multiple Audio Files Simultaneously

How to play multiple audio files simultaniously in flutter

May be their are more appropriate solutions but this solved my problem at the moment, I have used the plugin audioplayers and created multiple instances for each audio file.

Updated: For example for two audio files it's done like below:

enum PlayerState { stopped, playing, paused } 
enum PlayerState1 { stopped1, playing1, paused1 }

class AudioScreen extends StatefulWidget {
 
  @override
  _AudioScreenState createState() =>_AudioScreenState();
}

class _AudioScreenState extends State<AudioScreen> {
  //for first audio
  AudioPlayer audioPlayer;
  PlayerState playerState = PlayerState.stopped;
  get isPlaying => playerState == PlayerState.playing;
  //for second audio 
  AudioPlayer audioPlayer1;
  PlayerState1 playerState1 = PlayerState1.stopped1;
  get isPlaying1 => playerState1 == PlayerState1.playing1;

  @override
  void initState() {
    super.initState();
    audioPlayer = new AudioPlayer();
    audioPlayer1 = new AudioPlayer();
  }
   Future play() async {
    await audioPlayer.play(url);
    setState(() {
      playerState = PlayerState.playing;
     });
    await audioPlayer1.play(url1);
    setState(() {
      playerState1 = PlayerState1.playing1;
     });
  }
   Future stop() async {
    await audioPlayer.stop();
      setState(() {
      playerState = PlayerState.stopped;
      });
    await audioPlayer1.stop();
      setState(() {
      playerState1 = PlayerState1.stopped1;
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Column(
       children:[
        IconButton(
          onPressed:() play(),
          iconSize: 70.0,
          icon:Icon(Icons.play_circle_outline, size: 55),
        ),
        IconButton(
          onPressed:  stop(),
          iconSize: 55.0,
          icon: Icon(Icons.stop),
        ),
       ]
      ),
     );
  }
}

JS: play multiple audio sources simultaneously when loaded

MediaElements are meant for normal playback of media and aren't optimized enough to get low latency. The best is to use the Web Audio API, and AudioBuffers.

You will first fetch each file's data in memory, then decode the audio data from these, and once all the audio data has been decoded, you'll be able to schedule playing all at the same precise moment:

(async() => {
  const urls = [ "layer1_big.mp3", "layer2_big.mp3", "layer3_big.mp3" ]
    .map( (url) => "https://cdn.jsdelivr.net/gh/jacksorjacksor/jacksorjacksor/soundblocks/audio/" + url );
  // first, fetch each file's data
  const data_buffers = await Promise.all(
    urls.map( (url) => fetch( url ).then( (res) => res.arrayBuffer() ) )
  );
  // get our AudioContext
  const context = new (window.AudioContext || window.webkitAudioContext)();
  // decode the data
  const audio_buffers = await Promise.all(
    data_buffers.map( (buf) => context.decodeAudioData( buf ) )
  );
  // to enable the AudioContext we need to handle a user gesture
  const btn = document.querySelector( "button" );
  btn.onclick = (evt) => {
    const current_time = context.currentTime;
    audio_buffers.forEach( (buf) => {
      // a buffer source is a really small object
      // don't be afraid of creating and throwing it
      const source = context.createBufferSource();
      // we only connect the decoded data, it's not copied
      source.buffer = buf;
      // in order to make some noise
      source.connect( context.destination );
      // make it loop?
      //source.loop = true;
      // start them all 0.5s after we began, so we're sure they're in sync
      source.start( current_time + 0.5 );
    } );
  };
  btn.disabled = false;
})();

<button disabled>play</button>

Is possible to play multiple audio files simultaneously in android / ios / flutter?

For flutter, you should try this resource: https://pub.dev/packages/audioplayers

It supports playing multiple audio files, preloading audio files and playing them with minimal delay as possible