停止播放录音机

Question

您好我正在尝试创建一个录音机应用程序，目前我用户cordova插件和应用程序开始记录和停止。当我尝试播放文件时，该文件在音频完成时不会移动到停止状态，当我单击播放该列表中的两个音频时，两个音频文件都会播放

/*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(); 
    }

我的HTML是

<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>

我需要的是当点击一个播放按钮时它应该在播放完成时移动到停止状态，并且不应同时播放多个音频。有人可以帮助我。