How can I play the playlist automatically?

[euclidesmarques]

Hi,

How can I play the all tracks automatically? Like an infinite loop.

Congratulations and Thanks in advance

[KadjoFamian]

Hi @euclidesmarques,

In the example, there's a method called onFinish which look like this

<audio-track #audio [track]="selectedTrack (onFinish)="onTrackFinished($event)">

you could implement the onTrackFinished like this :

onTrackFinished(track: any) { let index = track.id; ++index; if(index > this.audioProvider.tracks.length -1){ index = 0 } this.audioProvider.tracks[index].play(); } I did not test the code above, but i think it is very logic. Try it and give feedback

I was looking for a way to arbitrary stop the current track. Example, stop the track after playing 30 seconds

[euclidesmarques]

Yes! Running like a Tic Tac clockPerfectly Thanks and congratulations! This plugin is very cool!

[abitul]

after if i use (onFinish)="onTrackFinished($event)" , onTrackingFinish called forever and not stop,,

please help

[KadjoFamian]

Before trying to play a new track, check if his id is not egal or greatter than audioProvider tracks length.

This is because if audioProvider has 4 song for example, it will play track from 0 to 3

there is a current attribute which indicate the current track that is playing. So you should always check if you're not outside the array of track

[abitul]

i checked , the id is not egal or greatter than audioProvider tracks length. but still called forever

[KadjoFamian]

Hi @abitul , that is the purpose of onFinished() event, it is called when a track has finish playing. Implementing it mean that you want to bring a playlist capability to your player. So after a track has finished playing, the event will fire and if that track is not the last managed by audioProvider, it will try to play the next track (current + 1).

Can you please provide the code of your onTrackFinished($event) function, maybe you miss something

[abitul]

component code:

Detail Surat {{suratName}}

{{suratName}} berarti {{suratMeaning}}, Surat {{suratName}} memiliki {{countAyat}} ayat, Surat ini termasuk kategori Surat {{suratCategory}}

{{audio.title}} ⚬ {{audio.artist}}

and controller :

import { NativeAudio } from '@ionic-native/native-audio'; import { Component,ViewChild } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; import { AudioProvider } from 'ionic-audio';

/**

• Generated class for the DetailSuratPage page.
• See https://ionicframework.com/docs/components/#navigation for more info on
• Ionic pages and navigation. */

@Component({ selector: 'page-detail-surat', templateUrl: 'detail-surat.html', }) export class DetailSuratPage {

myTracks =[]; allTracks; allData; suratName; suratMeaning; countAyat; suratCategory;

constructor(private audioProvider: AudioProvider, private navParams: NavParams) { // plugin won't preload data by default, unless preload property is defined within json object - defaults to 'none' this.allData = navParams.get("paramsData");

for (var i in this.allData) {
  this.myTracks.push({
    src: "assets/murottal/"+this.allData[i].fileName,
    art: "assets/imgs/icon-alquran-detail.png",
    artist: "Syeikh Al Ghoomidi",
    title: "Surat "+this.allData[i].suratName,
    preload: "metadata"
  })
}

}

ngAfterContentInit() { this.allTracks = this.audioProvider.tracks; }

onTrackFinished(track) { console.log('Track finished', track ); let index = track.id; ++index; if(index > this.audioProvider.tracks.length -1){ index = 0 } this.audioProvider.tracks[index].play(); } }

please help me

[KadjoFamian]

I understand, my first code was for the first question, a kind of infinite loop. the following code block will create an infinte loop. i mean the player will come to the first track when it reach the end if(index > this.audioProvider.tracks.length -1){ index = 0 }

Remove the condition above and end with something like this

` onTrackFinished(track: any) {

  if(this.audioProvider.current < this.audioProvider.tracks.length -1 ){

    this.audioProvider.current = this.audioProvider.current + 1;
    this.selectedTrack = {
                src: this.audioProvider.tracks[this.audioProvider.current].src,
                artist: this.audioProvider.tracks[this.audioProvider.current].artist,
                title: this.audioProvider.tracks[this.audioProvider.current].title,
                art: this.audioProvider.tracks[this.audioProvider.current].art,
                preload: this.audioProvider.tracks[this.audioProvider.current].preload
            };
           this.audioProvider.tracks[this.audioProvider.current].play();
  }

} `

Note that the current attribute is a flag that indicate the track that is playing

If the audioProvider manage 10 tracks, current will go from 0 to 9, so be carefull

[abitul]

thank u so much @Famian- but when i run to device or emulator i get this error

Warning: Can't resolve all parameters for WebAudioTrack in /Users/abit/Gonku/mobileapps/murottaloffline/node_modules/ionic-audio/dist/ionic-audio-web-track.d.ts: (?, ?). This will become an error in Angular v6.x Warning: Can't resolve all parameters for WebAudioTrack in /Users/abit/Gonku/mobileapps/murottaloffline/node_modules/ionic-audio/dist/ionic-audio-web-track.d.ts: (?, ?). This will become an error in Angular v6.x Warning: Can't resolve all parameters for CordovaAudioTrack in /Users/abit/Gonku/mobileapps/murottaloffline/node_modules/ionic-audio/dist/ionic-audio-cordova-track.d.ts: (?). This will become an error in Angular v6.x Warning: Can't resolve all parameters for CordovaAudioTrack in /Users/abit/Gonku/mobileapps/murottaloffline/node_modules/ionic-audio/dist/ionic-audio-cordova-track.d.ts: (?). This will become an error in Angular v6.x

can you help me ?

[KadjoFamian]

Not really, at this time, there nothing i could do because it is an internal error from the plugin. so maybe only the plugin maintainer could solve this. try to report an issue with your console info.

BWT, did you get your player to work the way you want?

[abitul]

@Famian- work for me, thank u so much 👍 👍 👍 👍

[arielfaur]

Have you seen the built-in sample? There is a playlist feature.