audio play list

[dineshmaths1]

I am working on audio play list . First audio complete After second audio url is changed but still playing first audio only .

This is my code

  <vg-player style="height:50px;" (onPlayerReady)="onPlayerReady($event)">
                            <vg-controls>
                                <vg-play-pause></vg-play-pause>
                                <vg-playback-button></vg-playback-button>

                                <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>

                                <vg-scrub-bar>
                                    <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
                                    <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
                                </vg-scrub-bar>

                                <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
                                <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>

                                <vg-mute></vg-mute>

                                <vg-fullscreen></vg-fullscreen>
                            </vg-controls>
                            <audio #media [vgMedia]="media" id="myAudio" preload="auto">
                                <source [src]="audio_url|audio:['pathToMedia']" [type]="'audio/mp3'">
                            </audio>

                        </vg-player>
  onPlayerReady(api: VgAPI) {
    this.api = api;

    this.api.getDefaultMedia().subscriptions.loadedMetadata.subscribe(this.playAudio.bind(this));
    this.api.getDefaultMedia().subscriptions.ended.subscribe(this.nextVideo.bind(this));
  }

  nextVideo() {
  
    this.currentIndex++;
    if (this.currentIndex === this.audio_source.length) {
      this.currentIndex = 0;
    }

    this.audio_url = this.audio_source[this.currentIndex];
    this.loadMedia(this.audio_url['uid']);
  }

  playAudio() {
    this.api.play();
  }