Nativescript-audio - currentTime - Angular

plugins

#1

Hello everybody,

I was looking forward to implement the nativescript-audio plugins in my application.
Everything is working well, except for the currentTime variable which is updated only when the player is triggered (togglePlay).
I was trying to do like a karaoke, the color of the lyrics would have been changed depending on the timer.
Can you give me some advises ?

Thanks,

the code as simple as it is:

html:

    <StackLayout class="float-btn">
        <Label class="float-btn-text" text="+" (tap)="togglePlay()"></Label>
    </StackLayout>
    <label [text]="this._player.currentTime"></label>

ts

export class HomeComponent implements OnInit {
    private _player: TNSPlayer;
    private duration: Number;

    constructor() {
        this._player = new TNSPlayer();
        this._player
            .initFromFile({
                audioFile: "~/audio/hymne.flac",
                loop: false,
                completeCallback: this._trackComplete.bind(this),
                errorCallback: this._trackError.bind(this)
            })
            .then(() => {
                this._player.getAudioTrackDuration().then(duration => {
                // iOS: duration is in seconds
                // Android: duration is in milliseconds
                console.log(`song duration:`, duration);
            });
        });
    }

    public togglePlay() {
        if (this._player.isAudioPlaying()) {
          this._player.pause();
        } else {
          this._player.play();
        }
      }
    
      private _trackComplete(args: any) {
        console.log("reference back to player:", args.player);
        // iOS only: flag indicating if completed succesfully
        console.log("whether song play completed successfully:", args.flag);
      }
    
      private _trackError(args: any) {
        console.log("reference back to player:", args.player);
        console.log("the error:", args.error);
        // Android only: extra detail on error
        console.log("extra info on the error:", args.extra);
      }

    ngOnInit(): void {
    }
}

#2

Hi,

I have an audioplayer widget like this:

The current time (0:48) is queried from nativescript-audio by using a setInterval that executes this._player.currentTime every x milliseconds.


#3

OK, I was hoping that angular would took charge of that.


#4

Hello Eddy,

Sorry to bother you,
To be able to change current time by moving the slider through “valueChange”, I was expecting to use “onTapDown” and “onTapRelease” in order to deactivate temporarily the “setInterval”. but it seams that it is not possible with nativescript.
How did you manage to make the slider “user responsive” without being spam by the setInterval ?

Thank you in advance,


#5

So, the relevant code I use for the slider above is like this (look for onCurrentTimeChanged):

HTML:

<Slider #slider [value]="currentTime" (valueChange)="isSliderValueChanged(slider.value) && onCurrentTimeChanged($event)" [maxValue]="duration" minValue="0" [class.disabled]="!audioFileSelected" (loaded)="sliderLoaded($event)"></Slider>

TypeScript:

onCurrentTimeChanged(args): void {
  const slider = <Slider>args.object;
  if (!isNaN(slider.value)) {
    this.seek(Math.floor(slider.value));
  }
}

seek(moment: number): void {
  this.player.seekTo(moment);
}

isSliderValueChanged(val: number): boolean {
  return Math.round(val) !== Math.round(this.currentTime);
}