how can I get the cover of an mp3 file?

Question

I have an mp3 file and when I read it with windows media player, it has the cover of the album, so I'm wondering if there's a way to get that cover in javascript or jQuery

Answer 1

Read more at this URL: http://www.richardfarrar.com/embedding-album-art-in-mp3-files/

What you want is to use the ID3 header, where the arists data and more is stored. Also images can be stored in these headers. Probably this is also done in the mp3 files you have.

A library like https://github.com/aadsm/JavaScript-ID3-Reader can read this data out of the MP3 with Javascript.

Borrowed from the example (Note: you need the library above before this code will work):

 function showTags(url) {
      var tags = ID3.getAllTags(url);
      console.log(tags);
      document.getElementById('title').textContent = tags.title || "";
      document.getElementById('artist').textContent = tags.artist || "";
      document.getElementById('album').textContent = tags.album || "";

      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.format + ";base64," +
                window.btoa(base64String);
        document.getElementById('picture').setAttribute('src',base64);
      } else {
        document.getElementById('picture').style.display = "none";
      }
    }

Answer 2

ID3 is no longer being maintained. Check here.

var jsmediatags = require("jsmediatags");

jsmediatags.read("./song.mp3", {
  onSuccess: function(tag) {
    console.log(tag);
    var image = tag.tags.picture;
    document.getElementById('title').innerHTML = tag.tags.title;
    document.getElementById('artist').innerHTML= tag.tags.artist;
    document.getElementById('album').innerHTML = tag.tags.album;
    document.getElementById('picture').title = tag.tags.title;
      if (image) {
        var base64String = "";
        for (var i = 0; i < image.data.length; i++) {
            base64String += String.fromCharCode(image.data[i]);
        }
        var base64 = "data:" + image.format + ";base64," +
                window.btoa(base64String);
        document.getElementById('picture').setAttribute('src',base64);
      } else {
        document.getElementById('picture').style.display = "none";
        document.getElementById('picture').title = "none";
      }
  },
  onError: function(error) {
    console.log(':(', error.type, error.info);
  }
});