Howler.js Ionic & Capacitor Media Controller

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;
    }
}

}