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

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

• javascript
• jquery
• audio

3 Answers 3

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

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

I wrote code a snippet extracting album art of MP3 or audio files, based on music-metadata, (which I am the repo owner of). Note that jsmediatags is abandoned since 4 years.

async function run() {
    const mm = await import('https://cdn.jsdelivr.net/npm/[email protected]/+esm');

    const fileInput = document.getElementById('file');
    const output = document.getElementById('output');
    const title = document.getElementById('title');

    fileInput.addEventListener('change', async (event) => {
        const file = event.target.files[0];
        output.innerHTML = ''; // Clear previous output

        if (file) {
            try {
                // Parse metadata using music-metadata
                const { common } = await mm.parseBlob(file);

                title.textContent = `${common.title} has ${common.picture ? common.picture.length : 0} embedded images:`;

                // Extract and display album art
                if (common.picture && common.picture.length > 0) {
                    common.picture.forEach((picture, index) => {
                        const base64String = btoa(
                            String.fromCharCode(...new Uint8Array(picture.data))
                        );
                        const imgElement = document.createElement('img');
                        imgElement.src = `data:${picture.format};base64,${base64String}`;
                        imgElement.alt = `Picture ${index + 1}`;
                        imgElement.style.maxWidth = '200px';
                        imgElement.style.margin = '10px';
                        output.appendChild(imgElement);
                    });
                } else {
                    output.textContent = 'No album art found';
                }
            } catch (err) {
                output.textContent = 'Error parsing metadata: ' + err.message;
            }
        } else {
            output.textContent = 'No file selected';
        }
    });
}

run();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Extract Album Art with music-metadata</title>
</head>
<body>
    <h3>Select an audio file with embedded album art</h3>
    <input style="cursor: pointer;" type="file" id="file" accept="audio/*" />
    <h3 id="title"></h3>
    <p id="output"></p>
</body>
</html>