title: Ionic3-How to set next/pervious button functions in ionic
body: <p>Currently I developing a new Mobile Musical App</p>
  
  <p>I need some help</p>
  
  <p>How to set next/pervious button function in ionic3 framework</p>
  
  <p>When user click next button,then next song will need to play.In the same way, if user click pervious button,then pervious songs will need to play.</p>
  
  <p>Here I added My code</p>
  
  <p><b><code>albumname.html</code></b></p>
  
  <pre><code>&lt;ion-footer&gt;
  
  &lt;audio-track #audioTrack [track]="currentTrack" [autoplay]="true" 
  (onFinish)="onTrackFinished($event)"&gt;
  
  &lt;div style="display: flex;position: relative;top: 27px;"&gt;
  
  &lt;button clear  (click)="change()"&gt;
  &lt;ion-icon name="pause" *ngIf="!visible" (click)="audioTrack.pause()"&gt;&lt;/ion- 
  icon&gt;
  &lt;ion-icon name="play" *ngIf="visible" (click)="audioTrack.canPlay ? 
  audioTrack.play() : next()"&gt;&lt;/ion-icon&gt;
  &lt;/button&gt;
  
  &lt;audio-track-progress-bar duration progress [audioTrack]="audioTrack" 
  style="width: 100%; margin: 0 10px;color: white"&gt;&lt;/audio-track-progress-bar&gt;
  &lt;/div&gt;
  &lt;div style="display: flex; justify-content: center; height: 50px;"&gt;
  &lt;div *ngIf="audioTrack"&gt;
  &lt;h4&gt;{{ audioTrack?.artist }}&lt;/h4&gt; 
   &lt;/div&gt;
  &lt;ion-spinner *ngIf="audioTrack &amp;&amp; audioTrack.isLoading"&gt;&lt;/ion-spinner&gt;
  &lt;/div&gt;
  &lt;/audio-track&gt;
  
   &lt;ion-icon name="ios-fastforward-outline" (click)="next()"&gt;&lt;/ion- 
  icon&gt;
  &lt;ion-icon name="ios-rewind-outline"&gt;&lt;/ion-icon&gt;
  
   &lt;/ion-footer&gt;
  </code></pre>
  
  <p><b><code>albumname.ts</code></b></p>
  
  <pre><code>import { Component, ChangeDetectorRef  } from '@angular/core';
  import { ModalController, Platform, IonicPage, NavController, NavParams, 
  ActionSheetController } from 'ionic-angular';
  import { StreamingMedia, StreamingVideoOptions } from '@ionic- 
  native/streaming-media';
  import { TabsnewPage } from '../tabsnew/tabsnew';
  import { ITrackConstraint } from 'ionic-audio';
  import { AlbumPage } from '../album/album'
  import { SocialSharing } from '@ionic-native/social-sharing';
  
  @IonicPage()
  @Component({
  selector: 'page-albumname',
  templateUrl: 'albumname.html',
   })
  export class AlbumnamePage {
  
  myTracks: ITrackConstraint[];
  playlist: ITrackConstraint[] = [];
  
  currentIndex: number = -1;
  currentTrack: ITrackConstraint;
  
  visible = false;
  
  constructor(public navCtrl: NavController, public navParams: NavParams, 
  public actionSheetCtrl: ActionSheetController, private streamingMedia: 
  StreamingMedia,   public platform: Platform, private _cdRef: 
  ChangeDetectorRef, public modalCtrl: ModalController,private socialSharing: 
   SocialSharing) {
  
   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/imgs/banner1.jpeg',
   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- 
  t12-MP3-V0.mp3',
   artist: 'Mercy-Badshah Feat',
   title: 'Lauren Gottlieb',
   art: 'assets/imgs/banner1.jpeg',
  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- 
  t12-MP3-V0.mp3',
  artist: 'Ahmed Chawki fest',
  title: 'Pitbull',
  art: 'assets/imgs/banner1.jpeg',
  preload: 'metadata' // tell the plugin to preload metadata such as 
  duration for this track, set to 'none' to turn off
  }];       
  }
  
  change() {
  this.visible = !this.visible;
  }
  
  play(track: ITrackConstraint, index: number) {
  this.currentTrack = track;
  this.currentIndex = index;   
  }
  
  next() {
   if (this.playlist.length &gt; 0 &amp;&amp; this.currentIndex &gt;= 0 ) {
   let i = this.currentIndex + 1;
   let track = this.playlist[i];
   this.play(track, i);
   this._cdRef.detectChanges();  
   } else if (this.currentIndex == -1 &amp;&amp; this.playlist.length &gt; 0) {
  
    this.play(this.playlist[0], 0);
   }
   }     
  
   onTrackFinished(track: any) {
   this.next();
    }
  
     clear() {
     this.playlist = [];
     }
  
     } 
  </code></pre>