如何获得 mp3 文件的封面？

Question

我有一个 mp3 文件，当我用 windows 媒体播放器阅读它时，它有专辑的封面，所以我想知道是否有办法在 javascript 或 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);
  }
});