ID3Tag reader

by Yaroslav Samardak

HTML

<input type="file" id="file" multiple />

<div id="out"></div>


<script>function A(g,f,b){function e(a,d,n,b,e,f){var k=c();k?("undefined"===typeof f&&(f=!0),d&&("undefined"!=typeof k.onload?k.onload=function(){"200"==k.status||"206"==k.status?(k.fileSize=e||k.getResponseHeader("Content-Length"),d(k)):n&&n();k=null}:k.onreadystatechange=function(){4==k.readyState&&("200"==k.status||"206"==k.status?(k.fileSize=e||k.getResponseHeader("Content-Length"),d(k)):n&&n(),k=null)}),k.open("GET",a,f),k.overrideMimeType&&k.overrideMimeType("text/plain; charset=x-user-defined"),b&&
k.setRequestHeader("Range","bytes="+b[0]+"-"+b[1]),k.setRequestHeader("If-Modified-Since","Sat, 1 Jan 1970 00:00:00 GMT"),k.send(null)):n&&n()}function c(){var a=null;window.XMLHttpRequest?a=new XMLHttpRequest:window.ActiveXObject&&(a=new ActiveXObject("Microsoft.XMLHTTP"));return a}function a(a,d){var b=c();b&&(d&&("undefined"!=typeof b.onload?b.onload=function(){"200"==b.status&&d(this);b=null}:b.onreadystatechange=function(){4==b.readyState&&("200"==b.status&&d(this),b=null)}),b.open("HEAD",a,
!0),b.send(null))}function d(a,d){var c,f;function h(a){var d=~~(a[0]/c)-f;a=~~(a[1]/c)+1+f;0>d&&(d=0);a>=blockTotal&&(a=blockTotal-1);return[d,a]}function g(l,f){for(;m[l[0]];)if(l[0]++,l[0]>l[1]){f&&f();return}for(;m[l[1]];)if(l[1]--,l[0]>l[1]){f&&f();return}var h=[l[0]*c,(l[1]+1)*c-1];e(a,function(a){parseInt(a.getResponseHeader("Content-Length"),10)==d&&(l[0]=0,l[1]=blockTotal-1,h[0]=0,h[1]=d-1);a={data:a.N||a.responseText,offset:h[0]};for(var b=l[0];b<=l[1];b++)m[b]=a;f&&f()},b,h,k,!!f)}var k,
r=new B("",0,d),m=[];c=c||2048;f="undefined"===typeof f?0:f;blockTotal=~~((d-1)/c)+1;for(var q in r)r.hasOwnProperty(q)&&"function"===typeof r[q]&&(this[q]=r[q]);this.a=function(a){var d;g(h([a,a]));d=m[~~(a/c)];if("string"==typeof d.data)return d.data.charCodeAt(a-d.offset)&255;if("unknown"==typeof d.data)return...

CSS

.song {
  border-bottom: 1px solid black;
}

JavaScript

(function() {
	var el = document.getElementById('file');
	var out = document.getElementById('out');

	function parseFile(url, callback, reader) {
		var startDate = new Date().getTime();
		ID3.loadTags(url, function() {
			var out = '<div class="song">';
			var endDate = new Date().getTime();
			if (typeof console !== "undefined") console.log("Time: " + ((endDate-startDate)/1000)+"s");
			var tags = ID3.getAllTags(url);

			out += '<p>Artist: ' + tags.artist || "" + '</p>';
			out += '<p>Title: ' + tags.title || "" + '</p>';
			out += '<p>Album: ' + tags.album || "" + '</p>';
			out += '<p>Year: ' + tags.year || "" + '</p>';
			out += '<p>Comment: ' + (tags.comment||{}).text || "" + '</p>';
			out += '<p>Genre: ' + tags.genre || "" + '</p>';
			out += '<p>Track: ' + tags.track || "" + '</p>';

			if ("picture" in tags) {
				var image = tags.picture;
				var base64String = "";
				for (var i = 0; i < image.data.length; i++) {
					base64String += String.fromCharCode(image.data[i]);
				}

				out += '<p>Image: <img style="width: 50px; height: 50px;" src="' + "data:" + image.format + ";base64," + window.btoa(base64String) + '" /></p>';
			}

			if( callback ) { callback(out); };
		}, {
			tags: ["artist", "title", "album", "year", "comment", "track", "genre", "picture"],
			dataReader: reader
		});
	}

	el.onchange = function(e) {
		out.innerHTML = '';
		var files = el.files;

		function readFile(index) {
			if (index >= files.length) return;

			var file = files[index];
			var url = file.url ||file.name;
			parseFile(url, function(html) {
				readFile(++index);
				out.innerHTML += html;
			}, FileAPIReader(file));
		}

		readFile(0);
	}
})();