Selfproblemmade Selfproblemmade - 2 months ago 17
HTML Question

ID3 - base64 cannot set as src for img

I just came the ID3 API across to get the cover of an audio file.
The base64 which is created by the API really good cannot be declarated in a

img
tag's
src
. The script don't even try to set a new
src
for the
img
tag.

https://github.com/aadsm/JavaScript-ID3-Reader

Here is my try:

<a class="uploaded_file"><img src="/symbol/audio.png"></a>

function getAudioCover(url) {
var tags = ID3.getAllTags(url);

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);
return base64;
}
else {
return "/symbol/audio.png";
}
}

var uploadedFiles = 0;
var file_cover;
ID3.loadTags("audio.mp3", function() {
file_cover = getAudioCover("audio.mp3");
console.log(file_cover);
}, {
tags: ["picture"]
});
$('.uploaded_file:eq(' + uploadedFiles + ')').find('img').attr("src", file_cover);


The console gives me this out: https://jsfiddle.net/f1wzbtyh/

How do I get this working?

Is there a overflow of string length for jquery or for src attribute?

Answer

Place call to .attr() within callback function. file_cover may not be defined when referenced outside of .loadTags call.

ID3.loadTags("audio.mp3", function() {
 file_cover = getAudioCover("audio.mp3");
 console.log(file_cover);
 $('.uploaded_file:eq(' + uploadedFiles + ')')
 .find('img').attr("src", file_cover);
}, {
 tags: ["picture"]
});