Getting MP3 ID3 album artwork using JavaScript and Data URLs

Thanks to noble efforts, it's now possible to retrieve MP3 ID3 information from a remote file using JavaScript.

See the following pages:

It doesn't seem to have occurred to anybody that this can in fact be used to retrieve MP3 album artwork data and display it locally to the user, via Data URLs. You simply request the APIC ID3v2 frame, get the mime type and the image data, and then base64 encode it as a Data URI and set it as the source for an image tag. This completely circumvents the need for any kind of image storing.

I don't recommend this method as a serious web technology solution, since it relies on both browser support for Data URLs, which is spotty at best, and massive amounts of JavaScript code and Javascript processing, which is slow.

However, it is undeniably rather neat.

Try it by pressing the button below:




Title:
Artist:
Album:









The code used is the following:

function getAlbumArt (url)
{
    var file = url;
    
    function callback() 
    {
        var pic = ID3.getTag(file, "picture");
        var artist = ID3.getTag(file, "artist");
        var title = ID3.getTag(file, "title");
        var album = ID3.getTag(file, "album");
        
        document.getElementById('id3_artist').innerHTML = artist;
        document.getElementById('id3_title').innerHTML = title;
        document.getElementById('id3_album').innerHTML = album;

        var albumcoverimg = document.getElementById('albumcover');
        albumcoverimg.src = 'data:' + pic.format + ';base64,' + Base64.encode(pic.data);
	    albumcoverimg.style.opacity = "1";
	    albumcoverimg.style.visibility = "visible";
	};
	
	ID3.loadTags(url, callback, ["picture", "artist", "title", "album"]);
}