stop play back of audio recorder

Question

Hi i am trying to create a audio recorder app, currently i user cordova plugin and app starts to record and stop. when i try to play a file, that file does not moves to stop state when audio gets completed and when i click play of two audio in that list both audio file are played

/*this will have the list of all files recorded */
ListAudioFiles(){
        File.listDir(cordova.file.externalRootDirectory, 'myFolder/Audios').then(
          (allFiles) => {
            // do something

            console.log("we have audio files", allFiles);
            console.log("we have audio files", allFiles.length);
            for (var i = 0; i < allFiles.length; i++){ 
                this.MyAudioFiles.push({
                    audio: allFiles[i],
                    status: false                   
                });
                console.log(this.MyAudioFiles);
            }
          }).catch(
          (err) => {
            // do something
            console.log("file listing err", err)
          });
    }


    startPlayback(audio, i) {   
        try {
            console.log("start playback function",audio.name);
            console.log("start playback function",i);
            this.MyAudioFiles[i].status = true;

            var pathalone =  audio.nativeURL;
            this.file = new MediaPlugin(pathalone, (status) => {

            });
            this.file.play(); 
            console.log("playback status", status);         
            console.log("play back file getDuration", this.file.getDuration());

        }
        catch (e) {
            this.showAlert('Could not play recording.');
        }
    }

    stopPlayback(audio, i) {
        console.log("stop pplayback function",audio.name);
        console.log("stop pplayback function",i);
        this.MyAudioFiles[i].status = false;
        this.file.stop(); 
    }

my html is

<ion-list>
        <ion-item *ngFor="let file of MyAudioFiles let i = index ">
            <ion-grid>
                <ion-row>
                    <ion-col width-10 >  
                        <ion-icon style ="padding-top: 9px;"  *ngIf="!file.status" name="play" (click)="startPlayback(file.audio, i)" ></ion-icon>
                        <ion-icon style ="padding-top: 9px;"  *ngIf="file.status" name="square" (click)="stopPlayback(file.audio, i)" ></ion-icon>
                    </ion-col>
                    <ion-col width-67 style ="padding-top:  16px;">

                       {{file.audio.name}}
                    </ion-col>
                    <ion-col width-10>

                        <button *ngIf="!file.upload" (click)="loginPage(file, i)" ion-button color="primary">
                            <ion-icon name="cloud-upload" primary></ion-icon>
                        </button>

                        <button *ngIf="file.upload" ion-button color="primary">
                            <ion-icon name="done-all" primary></ion-icon>
                        </button>
                         <!--button (click)="fileToTrash(file)" ion-button color="danger">
                            <ion-icon  name="trash" primary></ion-icon>
                        </button-->
                    </ion-col>
                </ion-row>
            </ion-grid>
        </ion-item>
    </ion-list>

what i need is when a play button is clicked it should move to stop state when play back gets completed, and multiple audio should not be played at the same time. could someone help me.