Ionic audio how can I play one track at a time

I am using this ionic audio plugin for playing audio files instead of creating an html5 audio or customizing audio players using css and javascript.

The plugin works great but the documentation is quite missing some pieces on how to handle some extra methods or how to customize its css.

My goal is to play one track at a time and stop this track whenever the device is off.

Here is the sample code of my home.html

<ion-list>
<audio-track #audio *ngFor="let track of myTracks" [track]="track" (onFinish)="onTrackFinished($event)">
<ion-item>
<div class="from-me set-points">
<ion-thumbnail>
<audio-track-play dark [audioTrack]="audio"><ion-spinner></ion-spinner></audio-track-play>
</ion-thumbnail>
<div item-content>
<audio-track-progress-bar dark duration progress [audioTrack]="audio"></audio-track-progress-bar>
</div>
</div>
</ion-item>
</audio-track>
</ion-list>


Here is the code in my home.ts

this.myTracks = [{
src: 'https://archive.org/download/JM2013-10-05.flac16/V0/jm2013-10-05-t12-MP3-V0.mp3',
artist: 'John Mayer',
title: 'Why Georgia',
art: 'assets/img/johnmayer.jpg',
preload: 'metadata' // tell the plugin to preload metadata such as duration for this track, set to 'none' to turn off
},
{
src: 'https://archive.org/download/JM2013-10-05.flac16/V0/jm2013-10-05-t30-MP3-V0.mp3',
artist: 'John Mayer',
title: 'Who Says',
art: 'assets/img/johnmayer.jpg',
preload: 'metadata' // tell the plugin to preload metadata such as duration for this track, set to 'none' to turn off
},

{
src: 'https://archive.org/download/swrembel2010-03-07.tlm170.flac16/swrembel2010-03-07s1t05.mp3',
artist: 'Stephane Wrembel',
title: 'Stephane Wrembel Live',
art: 'assets/img/Stephane.jpg',
preload: 'metadata' // tell the plugin to preload metadata such as duration for this track, set to 'none' to turn off
}];
}

ionViewWillEnter() {
this.getAudioList();
console.log('This is the audio lists', this.audioList)
this.allTracks = this._audioProvider.tracks;
}

ionViewWillLeave() {
this.pauseAudioProvider();
}

onTrackFinished(track: any) {
console.log('Track finished', track)
}

pauseAudioProvider(){
this._audioProvider.stop();
}


I only posted most of my code in constructor and the functions or methods outside of it. I won't show the code on how did I implement this plugin.

But my end goal is only to play one track at a time and when the device screen goes off the track keeps still playing unless I remove the app from the background of device.

Is there anyway to do this?

Appreciate if someone could help.
Thanks in advance.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.