Hi Folks,
Trying to create a simple player by passing a local .mp3 file path. Below is my code -
import { Component, OnInit } from '@angular/core';
import { MediaObject, Media } from '@ionic-native/media/ngx';
import { Platform, LoadingController } from '@ionic/angular';
@Component({
selector: 'app-paiddetail',
templateUrl: './paiddetail.page.html',
styleUrls: ['./paiddetail.page.scss'],
})
export class PaiddetailPage implements OnInit {
title: any;
artist: any;
filename: any = 'Baba O`reily';
duration: any = -1;
currPlayingFile: MediaObject;
storageDirectory: any;
playTheTrack = '../assets/GOT.mp3';
position: any = 0;
getPositionInterval: any;
isPlaying = false;
isInPlay = false;
isReady = false;
getDurationInterval: any;
displayPosition: any = '00:00';
displayDuration: any = '00:00';
constructor(public platform: Platform, private media: Media) { }
ngOnInit() {
// comment out the following line when adjusting UI in browsers
this.prepareAudioFile();
}
prepareAudioFile() {
this.platform.ready().then((res) => {
this.getDuration();
});
}
getDuration() {
this.currPlayingFile = this.media.create(this.playTheTrack);
// on occassions, the plugin only gives duration of the file if the file is played
// at least once
this.currPlayingFile.play();
this.currPlayingFile.setVolume(0.0); // you don't want users to notice that you are playing the file
const self = this;
// The plugin does not give the correct duration on playback start
// Need to check for duration repeatedly
let displayDuration = self.duration;
this.getDurationInterval = setInterval(() => {
if (self.duration === -1 || !self.duration) {
self.duration = ~~(self.currPlayingFile.getDuration()); // make it an integer
} else {
if (self.duration !== displayDuration) {
displayDuration = self.duration;
} else {
self.currPlayingFile.stop();
self.currPlayingFile.release();
clearInterval(self.getDurationInterval);
this.displayDuration = this.toHHMMSS(self.duration);
self.setToPlayback();
}
}
}, 100);
}
setToPlayback() {
this.currPlayingFile = this.media.create(this.playTheTrack);
this.currPlayingFile.onStatusUpdate.subscribe(status => {
switch (status) {
case 1:
break;
case 2: // 2: playing
this.isPlaying = true;
break;
case 3: // 3: pause
this.isPlaying = false;
break;
case 4: // 4: stop
default:
this.isPlaying = false;
break;
}
});
this.isReady = true;
this.getAndSetCurrentAudioPosition();
}
getAndSetCurrentAudioPosition() {
const diff = 1;
const self = this;
this.getPositionInterval = setInterval(() => {
const lastPosition = self.position;
self.currPlayingFile.getCurrentPosition().then((position) => {
if (position >= 0 && position < self.duration) {
if (Math.abs(lastPosition - position) >= diff) {
// set position
self.currPlayingFile.seekTo(lastPosition * 1000);
} else {
// update position for display
self.position = position;
this.displayPosition = this.toHHMMSS(self.position);
}
} else if (position >= self.duration) {
self.stop();
self.setToPlayback();
}
});
}, 100);
}
play() {
this.currPlayingFile.play();
}
pause() {
this.currPlayingFile.pause();
}
stop() {
this.currPlayingFile.stop();
this.currPlayingFile.release();
clearInterval(this.getPositionInterval);
this.position = 0;
}
controlSeconds(action) {
const step = 5;
const numberRange = this.position;
switch (action) {
case 'back':
this.position = numberRange < step ? 0.001 : numberRange - step;
break;
case 'forward':
this.position = numberRange + step < this.duration ? numberRange + step : this.duration;
break;
default:
break;
}
}
ngOnDestroy() {
this.stop();
}
toHHMMSS(secs) {
const secnum = parseInt(secs, 10);
const minutes = Math.floor(secnum / 60) % 60;
const seconds = secnum % 60;
return [minutes, seconds]
.map(v => v < 10 ? '0' + v : v)
.filter((v, i) => v !== '00' || i >= 0)
.join(':');
}
}