Media Plugin playing Playlist

Ionic Framework ionic-v3
1

i have an array of audio files that i want to play them one by one, unfortunately when i tap play, both play at the same time meaning for loop iterate through both and plays. i tried to add setTimeout to 5 sec. then go to the next audio but nothing worked still i can hear both of them.

all i want to act like normal player playing one audio file at a time and once audio file is finished playing, the for loop goes to the next audio in my array till all are played.

	this.songs.loadPlaylistSongs(pid).then((p)=>{
		if(p.length > 0){
			for(let z=0; z<p.length; z++){
				let music = p[z].song;
                //now play music..
				this.file = new MediaPlugin(music);
				this.file.play({ playAudioWhenScreenIsLocked : true });
				setTimeout(() => {
					this.file.stop();
				}, 5000);
				}
			}
		}else{ this.tt("Sorry, Playlist has no songs.."); }
	}).catch((err)=>{ this.tt(JSON.stringify(err)); });
2

Which plugin exactly are you using?

3

@Sujan12 Media Plugin (cordova-plugin-media)

4

So this: https://ionicframework.com/docs/v2/native/mediaplugin/

Looking at your code, what happens after 5 seconds?
Isn’t you code just iterating over all the items and then scheduling a stop() after 5 seconds?

Wouldn’t it be more useful to only start playback on one file, then when it finishes start the next file from the list?

Looking at the source of native/mediaplugin at https://github.com/driftyco/ionic-native/blob/master/src/plugins/media.ts this is implemented as a promise that returns successfully when a file is finished playing. This is probably what you want to use.

Or you can give the constructor a undocumented second parameter that is called when “status changes” (but you will have to find out what is returned to that function when, it corresponds to the mediaStatus callback function the original plugin constructor can have at https://github.com/apache/cordova-plugin-media#media).

5

Unfortunatelly i have failed to implement this, or maybe the docs are not explanatory enough… i have tried every option available but doesn’t give me an alert when song is finished playing or an error occured, thats why i was trying an alternative for setting timeout. My main intetion is to play the next audio after current playback has finished, the following are source codes to alert if playback is finished or error occured incase you want to try yourself. i tried it on real device.

i trigger play via ion-button with playNow($event)

import { Platform, AlertController } from 'ionic-angular'; 
import { MediaPlugin } from 'ionic-native';

@Component({
  selector: 'page-play',
  templateUrl: 'play.html'
})
export class PlayPage {

	constructor(public platform:Platform, public alertCtrl:AlertController) {}

	playNow(){
	   this.platform.ready().then(() => {
		const onStatusUpdate = (status) => console.log(status);
		const file = new MediaPlugin('path/to/file.mp3', onStatusUpdate);

		file.init.then(() => {
			//show alert playback finished..
			let alert = this.alertCtrl.create({
			  title: 'Info',
			  subTitle: 'Playback Finished',
			  buttons: ['Ok']
			});  
			alert.present();
		}, (err) => {
			//show alert on error..
			let alert = this.alertCtrl.create({
			  title: 'Info',
			  subTitle: 'Error Playing Audio',
			  buttons: ['Ok']
			});  
			alert.present();
		});

		file.play();
	   });
	}

}