How to play multiple audio sequentially with ionic Media plugin

Question

I am trying to play multiple audio files with ionic media plugin : https://ionicframework.com/docs/native/media. but I am having a hard time making it work as a playlist without using a timeout function.

Here is what I have tried out

playOne(track: AudioFile): Promise<any> {


 return new Promise(async resolve =>{

      const AudFile =  await this.media.create(this.file.externalDataDirectory+track.trackUrl);


       await resolve(AudFile.play())

   });


  }

Then to play All , I have this :

async playAll(tracks: AudioFile[]): Promise<any>{
    let player = (acc, track:AudioFile) => acc.then(() => 

        this.playOne(track)


    );

   tracks.reduce(player, Promise.resolve());
  }

This way they are all playing at the same time.

But If The PlayOne method is wrapped in a timeout function, the interval of the milli seconds set on the timeout exists among the play list, but one does not necessarily finish before the other starts and sometimes it waits for a long time before the subsequent file is plaid.

The timeout implementation looks like this :

playOne(track: AudioFile): Promise<any> {


 return new Promise(async resolve =>{
     setTimeout(async ()=>{
      const AudFile =  await this.media.create(this.file.externalDataDirectory+track.trackUrl);


       await resolve(AudFile.play())
     },3000)
   });


  }

Digging into ionic wrapper of the plugin, the create method looks like this :

/**
 * Open a media file
 * @param src {string} A URI containing the audio content.
 * @return {MediaObject}
 */
Media.prototype.create = function (src) {
    var instance;
    if (checkAvailability(Media.getPluginRef(), null, Media.getPluginName()) ===
        true) {
        // Creates a new media object
        instance = new (Media.getPlugin())(src);
    }
    return new MediaObject(instance);
};
Media.pluginName = "Media";
Media.repo = "https://github.com/apache/cordova-plugin-media";
Media.plugin = "cordova-plugin-media";
Media.pluginRef = "Media";
Media.platforms = ["Android", "Browser", "iOS", "Windows"];
Media = __decorate([
    Injectable()
], Media);
return Media;
 }(IonicNativePlugin));

Any suggestion would be appreciated

Answer 1

You may get it working by looping over your tracks and await playOne on each track.

async playAll(tracks: AudioFile[]): Promise<any> {
  for (const track of tracks) {
    await this.playOne(track);
  }
}

If I'm not mistaking play function doesn't block until playing the audio file is finished. It doesn't return a promise either. A work around would be to use a seTimeout for the duration of the track

playOne(track: AudioFile): Promise<any> {
  return new Promise((resolve, reject) => {
    const audFile =  await this.media.create(this.file.externalDataDirectory+track.trackUrl);
    const duration = audFile.getDuration(); // duration in seconds

    AudFile.play();
      setTimeout(() => {
        resolve();
      },
      duration * 1000 // setTimeout expect milliseconds
    );
  });
}