how to display the image inside a mp3 file in a image tag

Question

Hi I was trying to show the image retrieved from a mp3 file in a image tag using html and reactjs. This is the code I used.

   async getImageFromUploadedFile(framesRetrieved){
        const imageArrayBufferRetrieved = framesRetrieved[4].value.data;
        var blob = new Blob([imageArrayBufferRetrieved]);
        var reader = new FileReader();
        reader.onload = function(event){
        var base64 =   event.target.result;
        };
        reader.readAsDataURL(blob);
    }

when I console the base64 image I got something like this. screen capture of the base64 image

I tried to show the retrieved image using this code

            <Grid item xs={12}>
                <Grid item container xs={6}>
                <div id="title"></div>
               <img src="data:image/png;base64,base64"/>
               <div id="audioContainer"></div>
               <div id="lyricsContainer"></div>
                </Grid>
            </Grid>

But the image does not appear in the tag. There is no console errors. Great if you can help. Thanks.

are you talking about getting an image like the album art from the mp3 file? https://stackoverflow.com/questions/29881237/how-can-i-get-the-cover-of-an-mp3-file and this looks helpful https://github.com/aadsm/jsmediatags — Andrew Lohr, Feb 06 '20 at 17:03
Does this answer your question? [how can I get the cover of an mp3 file?](https://stackoverflow.com/questions/29881237/how-can-i-get-the-cover-of-an-mp3-file) — pptaszni, Feb 06 '20 at 17:36
Thank you so much I could do it with github.com/aadsm/jsmediatags. I have used wrong reader I guess — Chinthani, Feb 07 '20 at 09:23

Chinthani · Answer 1 · 2020-02-07T09:35:27.460

I could fix using https://www.npmjs.com/package/jsmediatags

First you have to install jsmediatags library using npm install jsmediatags --save

This is the code that I use to get the image of the mp3

  var jsmediatags = require("jsmediatags");

  new jsmediatags.Reader(content)
        .setTagsToRead(["title", "artist","picture","lyrics"]).read({
         onSuccess: function(tag) {

  var tags = tag.tags;

  var base64String = "";

  for (var i = 0; i < tags.picture.data.length; i++) {
    base64String += String.fromCharCode(tags.picture.data[i]);
  }
  var dataUrl = "data:" + tags.picture.format + ";base64," +window.btoa(base64String);

  document.getElementById('cover').setAttribute('src',dataUrl);
    },
    onError: function(error) {
      console.log(':(', error.type, error.info);
    }
  });

how to display the image inside a mp3 file in a image tag

1 Answers1