arielfaur / ionic-audio

An audio player for Ionic 3 and Angular 4. Works with HTML 5 audio or native audio using Cordova Media plugin.
http://arielfaur.github.io/ionic-audio/2.0/index.html
MIT License
321 stars 163 forks source link

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

Open tbergeron opened 7 years ago

tbergeron commented 7 years ago

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:

screen capture on 2017-06-05 at 12-49-47

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 commented 7 years ago

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

sfaizanh commented 7 years ago

@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 commented 7 years ago

@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 commented 7 years ago

Thanks I'll update it and let you know.

Sent from my iPhone

On Jul 2, 2017, at 07:32, arielfaur notifications@github.com 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 commented 7 years ago

@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 commented 7 years ago

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

satish22 commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

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

tanvishah-syn commented 6 years ago

@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);
}