I'm making an audio player and I want to condense the amount of space that the assets are taking up (mp3s and pictures). One way I thought of was putting the images in the mp3's metadata and accessing it from there, as you can then delete the normal image files and it would still work. I figured that getting that metadata from a local file path (like "./Music/SONGNAME.mp3") would be almost the same as getting the metadata from an <input type="file">. I have tried many different codes for this, the main gist seeming to be something like this:

jsmediatags.read(("./Music/" + song.audio), {
    onSuccess: function(tag) {
      var tags = tag.tags;
      console.log(tags);

      var image = tags.picture;
      if (image) {
        var base64String = "";
        for (var i = 0; i < image.data.length; i++) {
            base64String += String.fromCharCode(image.data[i]);
        }
        var base64 = "data:image/jpeg;base64," + window.btoa(base64String);
        main.thumbnail.setAttribute('src', base64);
      } else {
        main.thumbnail.style.display = "none";
      }
    }
});

("main" is an array of controls and stuff in the player, and song.audio is part of an object in an array of songs. "./Music/" is the folder path to my music)

Anyways, jsmediatags either don't accept file paths or I'm doing something incredibly wrong, because this code pretty much breaks my whole audio player.

If anyone can help, please do!!! (I've been working on this for an unhealthy amount of time...)