如何获得 mp3 文件的封面？

Question

我有一个 mp3 文件，当我用 windows 媒体播放器阅读它时，它有专辑的封面，所以我想知道是否有办法在 javascript 或 jQuery 中获得该封面

Answer 1

ID3 不再维护。在这里检查。

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);
  }
});

Answer 2

在此网址了解更多信息：http://www.richardfarrar.com/embedding-album-art-in-mp3-files/

您想要的是使用 ID3 标头，其中存储了 arists 数据等。图像也可以存储在这些标题中。可能这也在您拥有的 mp3 文件中完成。

像https://github.com/aadsm/JavaScript-ID3-Reader 这样的库可以使用 Javascript 从 MP3 中读取这些数据。

从示例中借用（注意：您需要上面的库才能运行此代码）：

 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";
      }
    }