Using Cordova Media to create progress bar with ion-range

@luked22 wrote:

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>

Posts: 1

Participants: 1

Read full topic