专辑封面未显示，使用 express.js、node.js、哈巴狗、javascript

Question

我正在尝试创建一个可以将音乐文件提供给音频元素的音乐应用程序。最终我想要一个客户端 ui 可以从播放列表中选择一首歌曲，甚至提供创建您自己的播放列表的可能性。这是一个个人学习项目 node.js。并且只是一个有趣的挑战。

但是现在专辑封面没有显示。我刚弄坏图像

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

这是我的哈巴狗代码：

    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 1

如果我正确理解你的问题，那么问题是对象“tags.picture”没有正确传递给 js。我可能会将“albumArt”功能移至 nodejs。像这样：

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

然后在哈巴狗代码中，您只需将其作为 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")

专辑封面未显示，使用 express.js、node.js、哈巴狗、javascript

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

javascript

base64

image

node.js

pug