Hi,
I am using Cordova’s Media to play media through an application I am building. I have been able to control things like volume using ion-range, playing and pausing the audio, and skipping/rewinding 15 seconds. I want to be able to build a progress bar utilizing an ion-range (or anything else suggested) but am struggling a bit with how to constantly callback the time that the audio is currently at. I am utilizing the getCurrentPosition() method in the controlSeconds function I have but that’s a touch event so I can easily detect this. I need to be able to constantly get the time. How would I do this? Any help is greatly appreciated!!
Here is the component:
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { MediaPlugin, MediaObject } from '@ionic-native/media';
@IonicPage()
@Component({
selector: 'page-story',
templateUrl: 'story.html',
})
export class StoryPage {
story:any;
isAudioPlaying:boolean=false;
volume: number;
audio: any;
position: number;
duration: number;
status: any;
// constructor
// --------------------------------------------------------------
constructor(public navCtrl: NavController, public navParams: NavParams, private media: MediaPlugin) {
let story = navParams.get('story');
this.story = story.fields;
console.log(this.story);
const file: MediaObject = this.media.create('http:' + this.story.audioFile.fields.file.url, (status) => {
this.status = status;
console.log(this.status);
});
this.audio = file;
this.volume = 50;
this.position = 0;
}
controlVolume(event) {
var sliderValue = 100 - Number.parseInt(event._barR);
this.audio.setVolume(sliderValue / 100);
}
controlAudio(action){
switch(action) {
case 'play':
this.audio.play();
this.isAudioPlaying = true;
this.duration = this.audio.getDuration();
break;
case 'pause':
this.audio.pause();
this.isAudioPlaying = false;
break;
}
}
// this does not work
controlProgressBar(event) {
var self = this;
if(this.isAudioPlaying == true ) {
setInterval(function () {
self.audio.getCurrentPosition().then((position) => {
self.position = position;
});
}, 1000);
}
}
controlSeconds(type) {
this.audio.getCurrentPosition().then((position) => {
var number = Number.parseInt(position) * 1000;
switch(type){
case 'back':
this.audio.seekTo(number - 15000);
break;
case 'forward':
this.audio.seekTo(number + 15000);
break;
}
});
}
ionViewDidLoad() {
console.log('ionViewDidLoad Story Page');
}
}
Here is my view:
<!-- my working volume control ion-range-->
<ion-item>
<ion-range min="0" max="100" [(ngModel)]="volume" (ionChange)="controlVolume($event)"></ion-range>
</ion-item>
<!-- the progress bar I want to use -->
<ion-item>
<ion-range min="0" max="100" [(ngModel)]="duration" color="secondary" (ionChange)="controlProgressBar($event)"></ion-range>
</ion-item>