Playing an audio file In Tauri with Howler JS

Question

I've been building a Music Player with Tauri JS and I ran into a problem while playing audio files with Howler JS giving me an error code 4, here is my code:

import { Howl, Howler } from 'howler';
import { convertFileSrc } from '@tauri-apps/api/tauri';
/**
 * @type {Howl}
 */
export let sound;

export const playFile = async (
    /** @type {string} */ file,
    /** @type {any} */ title,
    /** @type {any} */ artist,
    /** @type {any} */ album,
    /** @type {any} */ id,
    /** @type {any} */ filePath
) => {
    Howler.unload();

    console.log('playFile', id);
    console.log('filePath', filePath);
    currentPlaying.update((current) => {
        return {
            ...current,
            title: title,
            artist: artist,
            album: album,
            artwork: sanitizeFileName(title + artist)
        };
    });
    currentSongId.set(id);
    Howler.unload();

    const musicUrl = convertFileSrc(filePath);

    console.log('musicUrl', musicUrl);

    sound = new Howl({
        src: [musicUrl],
        format: ['mp3'],
        html5: true,
        preload: true,
        onend: async (e) => {
            await playNextSong();
            console.log(e);
        },
        onloaderror: (id, err) => {
            console.error('Error loading sound:', err);
        },
        onplayerror: (id, err) => {
            console.error('Error playing sound:', err);
        }
    });
    sound.play();
};

Here is my CSP in tauri.conf.json:

 "security": {
     "csp": "default-src 'self'; img-src 'self' asset: https://asset.localhost; media-src 'self' asset: https://asset.localhost"
    },

It gives me error:

[Log] musicUrl – "asset://localhost/%2Fhome%2Fn3rd%2FMusic%2FTems%20-%20Damages%202.mp3" (playerActions.js, line 42)

[Error] Error loading sound: – 4
    onloaderror (playerActions.js:55)
    (anonymous function) (howler.js:1348)

Please help!