Audio Track Progress range knob doesn't go back to 0 on track changes

[tbergeron]

When changing tracks, the progress knob resets but instead of going back to the left, it starts the new track from the last track position as seen in this animation below:

What happens is / How to replicate

(sorry for the delays in the gif, loading big track remotely takes a bit of time)

1. I start the track
2. Scroll to later in the track
3. Start a new track
4. Track starts showing progress starting from the last track's position
5. Scrolling later goes to the right position
6. Scrolling back to 0 goes to 0 successfully

Expect behavior

The progress bar knob should go back to 0 between track changes. Even calling seekTo(0) doesn't help.

Code

This is my main player.

<audio-track #audio [track]="audioService.currentTrack" (onFinish)="onTrackFinished($event)">
  <audio-track-progress-bar duration progress [audioTrack]="audioService.currentTrack">
  </audio-track-progress-bar>
</audio-track>

My list contains the track and play button, everything works alright.

<ion-list>
  <ion-item *ngFor="let track of tracks">
    <ion-thumbnail item-left>
      <img src="{{track.image}}">
    </ion-thumbnail>
    <h2>{{track.title}}</h2>
    <button ion-button (click)="playTrack(track)">Play</button>
  </ion-item>
</ion-list>

I have made one provider that handles the AudioProvider:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { AudioProvider } from 'ionic-audio';

@Injectable()
export class AudioService {
  currentTrack: any;
  currentTrackNumber: number = 0;
  isPlaying: Boolean = false;

  constructor(public http: Http, public audioProvider: AudioProvider) {
    console.log('Hello PodcastService Provider');
    // todo: crash on load if not set?
    this.currentTrack = {
      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'
    };
  }

  playPauseCurrentTrack() {
    if (this.isPlaying) {
      this.audioProvider.tracks[this.currentTrackNumber].pause();
      this.isPlaying = false;
    } else {
      // play first track if none was playing
      this.audioProvider.tracks[this.currentTrackNumber].play();
      this.isPlaying = true;
    }
  }

  playTrack(track) {
    if (this.isPlaying) {
      // stop current track
      this.audioProvider.tracks[this.currentTrackNumber].stop();
      this.isPlaying = false;
    }
    // wipe track list
    this.audioProvider.clear();
    // insert new track
    this.audioProvider.add(this.audioProvider.create(track));
    this.currentTrackNumber = 0;
    this.currentTrack = this.audioProvider.tracks[this.currentTrackNumber];
    // play new track
    this.audioProvider.tracks[this.currentTrackNumber].play();
    // NOTE: I tried to reset the seeker like this but not working
    // this.audioProvider.tracks[this.currentTrackNumber].seekTo(0);
    // flag isPlaying
    this.isPlaying = true;
  }
}

[arielfaur]

@tbergeron interesting behavior 😄 I guess it has to do with the Angular bindings that need to be reset.

[sfaizanh]

@arielfaur i have an similar issue when i play an audio it repeats every 2 or three seconds backwards. if i play single track it works fine but with knob behave like this. I used your code from demo

[arielfaur]

@sfaizanh I just pushed version 3.1.0. I refactored the progress bar component which was causing trouble, more precisely the behavior you mentioned where a track starts repeating. It was due to a two way binding with Ionic's ion-range control. I had to refactor the component using a standard HTML range component which is fully customizable using SASS variables. Let me know if that fixes that issue.

@tbergeron I am working on a new version right now that will solve that and also add the ability to create a playlist.

[sfaizanh]

Thanks I'll update it and let you know.

Sent from my iPhone

On Jul 2, 2017, at 07:32, arielfaur [email protected] wrote:

@sfaizanh I just pushed version 3.1.0. I refactored the progress bar component which was causing trouble, more precisely the behavior you mentioned where a track starts repeating. It was due to a two way binding with Ionic's ion-range control. I had to refactor the component using a standard HTML range component which is fully customizable using SASS variables. Let me know if that fixes that issue.

@tbergeron I am working on a new version right now that will solve that and also add the ability to create a playlist.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[tbergeron]

@arielfaur i want to test out the latest update but on 3.1.0 I get:

Typescript Error
Supplied parameters do not match any signature of call target.
app/src/app/app.module.ts
  IonicModule.forRoot(MyApp),
  IonicAudioModule

---

EDIT: I had to pass MyApp IonicAudioModule.forRoot(MyApp); and the error went away.

[arielfaur]

@tbergeron Yes, there was some minor refactoring in this version.

[satish22]

@tbergeron - Can you post a demo working code of the above gif audio player, where there are multiple file to choose from and there will be one player. Awesome work 👍

[arielfaur]

Hey there! I just uploaded version 3.2.0 with some new features and examples such as basic playlist management. It would be great to get some feedback.

@tbergeron the way to initialize the ionic-audio module is by passing the a factory function or using the default one provided with the module. I am sure you figured this one out by now 😃

import { IonicAudioModule, WebAudioProvider, CordovaMediaProvider, defaultAudioProviderFactory } from 'ionic-audio';

@NgModule({
  declarations: declarations(),
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicAudioModule.forRoot(defaultAudioProviderFactory), 
    // or use a custom provided function shown above myCustomAudioProviderFactory
  ],

[arielfaur]

Here's the link to the demo of the new version with playlist management: https://arielfaur.github.io/ionic-audio-demo/

[tanvishah-syn]

@arielfaur I am facing exactly opposite behaviour. In my application, when currently playing track changes the it's knob reset to 0 but after this if we move move knob forward/backward it will set back to 0 progress. I am using ionic 2 range component.

Home.html

<ion-item class="htm-background htm-col-item" no-lines>
      <ion-range #seeker [(ngModel)]="audio.progress" color="dark" [min]="0"
                [max]="audio ? audio.duration:0"
                (ngModelChange)="changeSeekTo(audio, seeker.value)">
      </ion-range>
</ion-item>

Home.ts

changeSeekTo(audioTrack: any, seekValue: any) {
        console.log('Track knob is changed Object>>>', audioTrack);
        console.log('Track knob is changed>>>>', audioTrack.track);
        audioTrack.seekTo(seekValue);
}