Ionic 2 audio is overlapping with previously played audio


#1

I am working new to IONIC App. I am facing issue with Audio. Can anyone please help me in this?
Problem: Audio is overlapping with already playing audio.
Plugins used: "ionic-audio": "^3.2.0", "cordova-plugin-nativeaudio": "^3.0.9", "@ionic-native/native-audio": "^4.2.1",
Procedure: After login, I am redirecting my app to a dashboard which will contain all audio data in list view. and When I clicked on any audio list item. I am opening a modal and assign to currentTrack. Step2: Close the current modal and select another audio file. I am assigning currentTrack to latest one. I was expected that it will overwrite the existing one and start playing new audio. But unfortunately, both files are playing at the same time.
Included Packages:
import { AudioProvider, ITrackConstraint } from 'ionic-audio';
My Code: dashboard.html:

<ion-card class="cardSlider" *ngFor = "let key of musicRecords">
<img class="image"
src="{{key.featured_img}}" (click) = "openPlayer(key)" />
<ion-card-content>
{{setTitle(key.title)}}

</ion-card-content>
</ion-card>

dashboard.ts:

openPlayer(key: any) {
let input = {'data' : key};
let player = this.modalPlayer.create (PlayerPage, key);
player.present();
}

PlayerPage.ts - Modal:

play(track: ITrackConstraint) {
this.currentTrack = track;
this.backgroundMode.enable();
}