Estoy tratando de crear una aplicación de música que pueda servir archivos de música a un elemento de audio. Finalmente, quiero una interfaz de usuario del lado del cliente que pueda elegir una canción de una lista de reproducción e incluso ofrecer la posibilidad de crear su propia lista de reproducción. Es un proyecto personal para aprender node.js. y solo un desafío divertido.
Pero en este momento no se muestra la carátula del álbum. solo me sale la imagen rota
// 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); } });Aquí está mi código pug:
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")Si entiendo su problema correctamente, entonces el problema es que el objeto "tags.picture" no se pasa al js correctamente. Probablemente movería la función "albumArt" a nodejs. Algo como esto:
//... 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); } });y luego en el código pug solo necesitas pasarlo como 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")