Problem with importing mp3 files in a module

I'm trying to implement a loading page in my JavaScript app that loads all the files before launching the app (twelve mp3 files and five png files) , but the way I'm doing it returns empty objects with mp3 files. I'm using parcel as bundler.

While I was loading the mp3 files through the index.html and the query selector, everything was fine. Now I'm trying to load them in the model.js file. With images everything works fine, with mp3 doesn't.

What I'm doing wrong?

model.js:

import favicon from  "../img/favicon.png"
import css3 from  "../img/css3.png"
import html5 from  "../img/html5.png"
import javascript from  "../img/javascript.png"
import github from  "../img/github.png"
import blobBtn from  "../audio/blobBtn.mp3"
import closeBtn from  "../audio/closeBtn.mp3"
import correctAnswer from  "../audio/correctAnswer.mp3"
import correctUsername from  "../audio/correctUsername.mp3"
import deleteRecord from  "../audio/deleteRecord.mp3"
import emptyUsername from  "../audio/emptyUsername.mp3"
import gameOver from  "../audio/gameOver.mp3"
import navBtns from  "../audio/navBtns.mp3"
import preferencesBtns from  "../audio/preferencesBtns.mp3"
import restart from  "../audio/restart.mp3"
import startQuiz from  "../audio/startQuiz.mp3"
import wrongAnswer from  "../audio/wrongAnswer.mp3"


export const files ={
    audioFiles: [
      blobBtn,
      closeBtn,
      correctAnswer,
      correctUsername,
      deleteRecord,
      emptyUsername,
      gameOver,
      navBtns,
      preferencesBtns,
      restart,
      startQuiz,
      wrongAnswer,
      ],
      imageFiles: [
        favicon,
        css3,
        html5,
        javascript,
        github
      ],
    loadedFiles: 0,
    totalFiles: 0,
}

controller.js:

const loadFiles = async function() {
    try {
        await Promise.all([...model.files.audioFiles, ...model.files.imageFiles].map(loadFile));
        console.log('All files are loaded'); //Doesn't start cause audioFiles is an array of empty objects
        filesLoaded();
    } catch (error) {
        console.error("There was an error loading the files:", error);
    }
}
  
const loadFile = async function(file) {
    return new Promise((resolve) => {
        console.log(file); // Ok with images, not with mp3 (12 empty objects)
        const fileType = file.includes(".mp3") ? "audio" : "image";
        const element = fileType === "audio" ? new Audio() : new Image();
        element.onload = element.oncanplaythrough = resolve;
        element.src = file;
    });
};
  
  
const filesLoaded = function() {
    loadingView.hideWindow();
    welcomeView.showWindow();
    welcomeView.startHandlers(controlUsername, controlFromWelcomeToPreferences);
}
const init =  function() {
    model.totalFiles = model.files.audioFiles.length + model.files.imageFiles.length;
    loadingView.showWindow();
    loadingView.renderData()
    loadFiles()
    /* loadingView.simulateLoading() */
}()

I continued to run tests, clearing the parcel cache, and "finally" generated the error that led me to the solution: "No transformers found for ..." error.

While searching for the error, I ended up here: Github - Parcel issues

So, the error was that the "url:" particle was missing in the file path string.