album art not showing, using express.js, node.js, pug, javascript

I am trying to create a music app that can serve music files to an audio element. Eventually I want a client side ui that can pick a song from a playlist and even offer a possibility of creating your own playlist. It’s a personal project for learning node.js. and just a fun challenge.

But right now the album art isn’t showing. I just get broken image

// var server=require('http');
var jsmediatags = require('jsmediatags');
var express= require('express');
var app=express();
var pug=require('pug');
const fs=require('fs');
const { error } = require('console');
var tagsArray=Array();

const port=3000;
const host='localhost';

app.use('/public',express.static('public'));
app.set('views','./views');
app.set('view engine', 'pug');

// var html="<h1>Hello</h1>"

// fs.writeFile('index.html',html, (error)=>{
//   if(error){
//     console.log(error)
//   }
//   else{
//     console.log("success")
//   }
// })

const server =app.listen(port, host, ()=>{

  console.log("server started at "+host+"port:"+port);

  
});

process.on('SIGTERM', () => {
  server.close(() => {
    console.log('Process terminated')
  })
})


jsmediatags.read("./public/Music/Pink_Floyd/WishYouWereHere/ShineOnYouCrazyDiamond(PartsI-V).mp3", {
  onSuccess: function(tag) {
    // console.log(tag);
    
    var tags=tag.tags;
    tagsArray=[tags.artist,tags.track,tags.album,tags.title,tags.picture];
    var artist=tags.artist;
    var album=tags.album;
    var title=tags.title;
    var track=tags.track;
    var base64Url=Buffer.from(tags.picture.data).toString("base64");
    var artInfo="data:"+tags.picture.format+";base64,"+base64Url;
    
    console.log(`data:${tags.picture.format};base64,`);

    app.get('/', (req, res)=>{

      res.render("index", {
        artist:tags.artist,
        album: tags.album,
        title: tags.title,
        track: tags.track,
        art: artInfo
        
      });
      console.log('done');
    });
    //   res.render('index');
    
    



  },
  onError: function(error) {
    console.log(':(', error.type, error.info);
  }
});

Here is my pug code :

    html(lang="en")
head
    title Music App
body
    img#albumC(src="#{art}" alt='album art')
    h2 Artist: #{artist}
    h2 Album: #{album}
    h2 Song: #{title}
    h2 Track: #{track}
    audio(controls src="/public/Music/Pink_Floyd/WishYouWereHere/ShineOnYouCrazyDiamond(PartsI-V).mp3")

Answer

If i understand your issue correctly, then the problem is, that the object “tags.picture” isn’t being passed to the js correctly. I would probalby move the “albumArt” function to the nodejs. Something like this:

//...
jsmediatags.read("./public/Music/Pink_Floyd/WishYouWereHere/ShineOnYouCrazyDiamond(PartsI-V).mp3", {
    onSuccess: function(tag) {
    // console.log(tag);
    
    var tags=tag.tags;
    tagsArray=[tags.artist,tags.track,tags.album,tags.title,tags.picture];
    var artist=tags.artist;
    var album=tags.album;
    var title=tags.title;
    var track=tags.track;
    //Create a buffer, stringify it and format it to a data url.
    var art=`data:${tags.picture.format};base64,${Buffer.from(tags.picture.data).toString("base64")}`;
    // console.log(tags.picture);

    app.get('/', (req, res)=>{

      res.render("index", {
        artist:tags.artist,
        album: tags.album,
        title: tags.title,
        track: tags.track,
        art: art
        
      });
    });
    //   res.render('index');
  },
  onError: function(error) {
    console.log(':(', error.type, error.info);
  }
});    

and then in the pug code you just need to pass it as a src:

doctype html
html(lang="en")
    head
        title Music App
    body
        img#albumC(src='#{art}' alt='')
        h2 Artist: #{artist}
        h2 Album: #{album}
        h2 Song: #{title}
        h2 Track: #{track}
        audio(controls src="/public/Music/Pink_Floyd/WishYouWereHere/ShineOnYouCrazyDiamond(PartsI-V).mp3")