Howler.js Ionic & Capacitor Media Controller - ionic-framework

Question

I am writing an application with ionic using "Howler.js" and "Capacitor Music Controls Plugin". With "howler.js", I manage in-app audio files as I want, but I want to add media control feature on statusbar when the application continues to run in the background. As I mentioned, as a result of my research, I found the "Capacitor Music Controls Plugin" and successfully included it in the project. If we come to my problem; Although I can "play / pause" in the app, I pause on the statusbar, but when I press play again it tries to play the same audio file over and over. I share the functions I have written and used below.
Note: As far as I check it on the console, it calls "CapacitorMusicControls" more than once. You can see it in detail below.
https://ibb.co/Ld80LNX
https://ibb.co/6sPcmsd
https://ibb.co/Cs9Nw2L
https://ibb.co/Bj0h9fP
https://ibb.co/2hhqhQW
import { Injectable } from '#angular/core';
import { Howl } from 'howler';
import { Plugins } from '#capacitor/core';
const { CapacitorMusicControls } = Plugins;
#Injectable({
providedIn: 'root'
})
export class GeneralService {
public detail: string;
public activeTrack;
player: Howl = null;
public isPlaying = false;
public progress = 0;
public durationSongHour = Number();
public durationSongMin = Number();
public durationSongSec = Number();
public currentTime = Number();
public currentTimeHour = Number();
public currentTimeSec = Number();
public currentTimeMin = Number();
public durationSong = Number();
public playlist: any;
constructor(
) {
CapacitorMusicControls.addListener('controlsNotification', (info: any) => {
console.log('listener', info.message);
this.handleControlsEvent(info);
});
}
public createMusicControl(track) {
CapacitorMusicControls.create({
track: track.title, // optional, default : ''
artist: track.subtitle, // optional, default : ''
cover: track.img, // optional, default : nothing
// cover can be a local path (use fullpath 'file:///storage/emulated/...', or only 'my_image.jpg' if my_image.jpg is in the www folder of your app)
// or a remote url ('http://...', 'https://...', 'ftp://...')
// hide previous/next/close buttons:
hasPrev: true, // show previous button, optional, default: true
hasNext: true, // show next button, optional, default: true
hasClose: true, // show close button, optional, default: false
// iOS only, optional
duration: 60, // optional, default: 0
elapsed: 10, // optional, default: 0
hasSkipForward: true, //optional, default: false. true value overrides hasNext.
hasSkipBackward: true, //optional, default: false. true value overrides hasPrev.
skipForwardInterval: 15, //optional. default: 15.
skipBackwardInterval: 15, //optional. default: 15.
hasScrubbing: false, //optional. default to false. Enable scrubbing from control center progress bar
// Android only, optional
isPlaying: true, // optional, default : true
dismissable: true, // optional, default : false
// text displayed in the status bar when the notification (and the ticker) are updated
ticker: 'Now playing "Time is Running Out"',
//All icons default to their built-in android equivalents
//The supplied drawable name, e.g. 'media_play', is the name of a drawable found under android/res/drawable* folders
playIcon: 'media_play',
pauseIcon: 'media_pause',
prevIcon: 'media_prev',
nextIcon: 'media_next',
closeIcon: 'media_close',
notificationIcon: 'notification'
}, (res) => {
console.log('res: ' + res);
}, (err) => {
console.log('err: ' + err);
});
}
public start(track) {
if (this.player) {
CapacitorMusicControls.destroy();
this.player.stop();
}
this.player = new Howl({
src: [track.path],
html5: true,
onplay: () => {
console.log('onplay');
this.detail = track;
this.isPlaying = true;
this.createMusicControl(track);
this.activeTrack = track.id;
this.durationSong = this.player.duration();
this.durationSongHour = Math.floor(this.durationSong / 3600);
this.durationSongMin = Math.floor(this.durationSong % 3600 / 60);
this.durationSongSec = Math.floor(this.durationSong % 3600 % 60);
this.acurrenTime();
this.updateProgress();
},
onend: () => {
this.nextSongAfterFinished();
}
});
this.player.play();
}
public tooglePlayer(pause) {
if (pause == "pause") {
this.player.pause();
this.isPlaying = false;
} else if (pause == "play") {
this.player.play();
this.isPlaying = true;
} else {
this.player.pause();
this.isPlaying = false;
}
}
public nextSong(playlist) {
var index = playlist.findIndex(x => x.id === this.activeTrack);
if (index != playlist.length - 1) {
this.start(playlist[index + 1]);
} else {
this.start(playlist[0]);
}
}
public nextSongAfterFinished() {
console.log('sıradaki sıradaki', this.playlist);
var index = this.playlist.findIndex(x => x.id === this.activeTrack);
if (index != this.playlist.length - 1) {
this.start(this.playlist[index + 1]);
} else {
this.start(this.playlist[0]);
}
}
public prevSong(playlist) {
var index = playlist.findIndex(x => x.id === this.activeTrack);
if (index > 0) {
this.start(playlist[index - 1]);
} else {
this.start(playlist[playlist.length - 1]);
}
}
public acurrenTime() {
this.currentTime = this.player.seek();
this.currentTimeHour = Math.floor(this.currentTime / 3600);
this.currentTimeMin = Math.floor(this.currentTime % 3600 / 60);
this.currentTimeSec = Math.floor(this.currentTime % 3600 % 60);
setTimeout(() => {
this.currentTimeHour = Math.floor(this.currentTime / 3600);
this.currentTimeMin = Math.floor(this.currentTime % 3600 / 60);
this.currentTimeSec = Math.floor(this.currentTime % 3600 % 60);
this.acurrenTime();
}, 1000)
}
public seek(range) {
let duration = this.player.duration();
this.player.seek(duration * (range / 100));
}
public updateProgress() {
let seek = this.player.seek();
this.progress = (seek / this.player.duration()) * 100 || 0;
setTimeout(() => {
this.updateProgress();
}, 1000)
}
handleControlsEvent(action) {
const message = action.message;
console.log("message: " + message)
switch (message) {
case 'music-controls-next':
//do something
break;
case 'music-controls-previous':
//do something
break;
case 'music-controls-pause':
this.isPlaying = false;
this.player.pause();
break;
case 'music-controls-play':
this.isPlaying = true;
this.player.play();
break;
case 'music-controls-destroy':
this.player.stop();
this.activeTrack = null;
CapacitorMusicControls.destroy();
console.log('destroyed', message);
break;
// External controls (iOS only)
case 'music-controls-toggle-play-pause':
// do something
break;
case 'music-controls-seek-to':
// do something
break;
case 'music-controls-skip-forward':
// Do something
break;
case 'music-controls-skip-backward':
// Do something
break;
// Headset events (Android only)
// All media button events are listed below
case 'music-controls-media-button':
this.player.pause();
break;
case 'music-controls-headset-unplugged':
// Do something
break;
case 'music-controls-headset-plugged':
this.player.pause();
break;
default:
break;
}
}
}