Tips for Using Ionic Audio without Components

[TimeTravelersHackedMe]

Hey, I'm trying to use Ionic Audio without using the components. I'm doing this because I want to be able to play audio in the background as the user navigates away from the views where the components would be.

My main problem is I'm not sure how I can tie into the onFinish event, get the track progress, and get the track total time using the AudioProvider.

Here's my code so far:

import { Injectable } from '@angular/core';
import { AudioProvider } from 'ionic-audio';

/*
  Generated class for the AudioPlayerProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class AudioPlayerProvider {

  constructor(public audioProvider: AudioProvider) {
    console.log('Hello AudioPlayerProvider Provider');
  }

  playSong(track: any) {
    this.audioProvider.stop();
    var audio = <any>{};
    audio.src = track.mediaLink ? track.mediaLink : track.src[0].replace(/^http:\/\//i, 'https://');
    audio.artist = track.artist;
    audio.title = track.title;
    audio.art = track.artLink ? track.artLink : track.art[0];
    audio.preload = 'metadata';
    this.audioProvider.create(audio);
    this.audioProvider.play(this.audioProvider.tracks.length - 1);
  }

  pauseSong() {
    this.audioProvider.pause();
  }

  togglePlay() {
    if(this.audioProvider.current) {
      this.audioProvider.pause();
    } else {
      this.audioProvider.play(this.audioProvider.tracks.length - 1);
    }
  }

  getProgress() {

  }

  setProgress() {

  }

  getTrackTotalTime() {

  }

}

Anyone know how I can fill in those functions at the bottom and also get access to the onFinish event?

[arielfaur]

@TimeTravelersHackedMe I don't know if it makes sense to use this plugin. You might be better off using the HTML Audio API or something like SoundManager 2: http://www.schillmania.com/projects/soundmanager2/

[viococo]

Hey, I have a similar problem. Can I get the duration of the track like in the track-progress-bar in my .ts file ?

[arielfaur]

@viococo This is just an idea, but you could get a reference to the audio-track component and use it in the code:

<audio-track #audio *ngFor="let track of myTracks" [track]="track">
...
</audio-track>

Then in your .ts file:

import { Component, ViewChild } from '@angular/core';
import { IAudioTrack } from 'ionic-audio';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('audio') audioTrack: IAudioTrack;

  ngAfterViewInit() {
    // get duration from component instance in page
   let duration = this.audioTrack.duration;
  }
}

[viococo]

I will try it, thanks :)