duplicate track on play button click

[sunil123456]

I am getting duplicate track in playlist whenever i click on play. I want to show added playlist shown on page load. Is therey any complete working source except ionic-audio demo?

  ionViewDidLoad() {
    this.playlist = this._audioProvider.tracks;
  }

 play(track: ITrackConstraint, index: number) {
    this.currentTrack = track;
    this.currentIndex = index; 
  }

<ion-content padding>

<p>
    This sample project shows you how simple it is to work with the ionic-audio module.
  </p>
   <ion-list>
    <ion-item *ngFor="let track of myTracks">
      <ion-thumbnail item-left>
        <img src="{{track.art}}">
      </ion-thumbnail>
      <h2>{{track.title}}</h2>
      <button ion-button (click)="play(track, i)">Play</button>
    </ion-item>
  </ion-list>

  <audio-track #audioTrack [track]="currentTrack" [autoplay]="true" (onFinish)="onTrackFinished($event)">
    <div>
   <ion-toolbar text-center transparent >
    <ion-icon  tappable class="controls" (click)="prev()" name="rewind" style="font-size: 46px;padding-right:21px;"></ion-icon>
    <ion-spinner *ngIf="audioTrack && audioTrack.isLoading"></ion-spinner>
    <span *ngIf="audioTrack && !audioTrack.isLoading">
    <ion-icon *ngIf="!audioTrack.isPlaying" tappable class="controls" (click)="audioTrack.canPlay ? audioTrack.play() : next()" name="play" style="font-size: 46px;padding-right:10px;padding-left:10px;"></ion-icon>
    <ion-icon *ngIf="audioTrack.isPlaying"  tappable class="controls" (click)="audioTrack.pause()" name="pause" style="font-size: 46px;padding-right:10px;padding-left:10px;"></ion-icon>
    </span>
    <ion-icon tappable class="controls" (click)="next()" name="fastforward" style="font-size: 46px;padding-left:21px;"></ion-icon>
  </ion-toolbar>

    </div>
    <div style="display: flex; justify-content: center; height: 50px">
      <audio-track-progress-bar  duration progress [audioTrack]="audioTrack" [ngStyle]="{visibility: audioTrack.completed > 0 ? 'visible' : 'hidden'}"></audio-track-progress-bar>
    </div>
    <div style="display: flex; justify-content: center; height: 50px">
      <div *ngIf="audioTrack && audioTrack.hasLoaded"><em>{{ audioTrack?.title }}</em></div>
    </div> 
  </audio-track>

  <ion-list *ngIf="playlist.length > 0">
    <ion-list-header no-lines inset>
      PLAYLIST 
      <button ion-button clear item-right (click)="clear()">Clear</button>
    </ion-list-header>
    <ion-item *ngFor="let track of playlist; let i = index">
      <h2>{{ track.title }}</h2>
      <p>{{ track.artist }}</p>
      <button ion-button icon-only item-end (click)="play(track, i)">
          <ion-icon name="play"></ion-icon>
        </button>
    </ion-item>
  </ion-list>

</ion-content>

[arielfaur]

No, at the moment the only example is the ionic-audio-demo project on GitHub!

[sunil123456]

how to remove duplicate entry from this._audioProvider.tracks?

[arielfaur]

What are you trying to achieve? Why is the ionic-audio demo not suitable? It does exactly that.

[arielfaur]

I don't know why you are getting duplicates. Sorry, I have no time now to test your code.

[sunil123456]

is there anyone implemented this plugin? because i don't think it is useful sorry

[arielfaur]

@sunil123456 I don't understand what you are trying to do. Are you trying to obtain the tracks in the playlist? Or in case you want to share the playlist between different pages maybe you can use a service. I cannot guess from your code.

[sunil123456]

when i click on play button it gets automatically adds in playlist because it is using two way binding. It should not add there if is duplicate.

[arielfaur]

What is this for?

ionViewDidLoad() {
    this.playlist = this._audioProvider.tracks;
  }

I am running my ionic-audio example and I don't get any duplicates

[sunil123456]

this will add songs into playlist so that i can use it after... please see my code it would be great help https://github.com/sunil123456/ionic-audio-demo