NeoCat/toptracks.html

## toptracks.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>last.fm API test</title>
<script>
var api_key = '0809689c938abf942a0d980ff25b5689';
var api_url = "http://ws.audioscrobbler.com/2.0/?method=artist.gettoptracks&api_key="+api_key+"&format=json&autocorrect=1&artist=";

function $(id) { return document.getElementById(id); }

// アーティストのtoptracksを取得
function gettoptracks(artist) {
	xds.load(api_url + artist, function(res) {
		document.res = res;
		if (!res.toptracks)
			$("result").innerHTML = res.message || "APIエラー";
		else
			display_tracks(res.toptracks.track);
	}, function(){
		alert("last.fm APIの呼出しに失敗しました。");
	});
}

// 結果表示
function display_tracks(tracks) {
	if (!tracks) {
		$("result").innerHTML = "見つかりませんでした。";
		return;
	}
	if (!tracks[0]) tracks[0] = tracks; // ヒット数=1
	$("result").innerHTML = "";
	var ele = document.createElement("h1");
	ele.innerHTML = tracks[0].artist.name + " のトップ曲";
	$("result").appendChild(ele);
	ele = document.createElement("ol");
	for (var i = 0; i < tracks.length; i++) {
		var t = tracks[i];
		var e = document.createElement("li");
		var a = document.createElement("a");
		a.href = t.url;
		a.innerHTML = t.name;
		if (t.image && t.image[0]) {
			var img = document.createElement("img");
			img.src = t.image[0]["#text"];
			e.appendChild(img);
		}
		e.appendChild(a);
		ele.appendChild(e);
	}
	$("result").appendChild(ele);
}

// クロスドメインJavaScript呼出し ( http://d.hatena.ne.jp/NeoCat/20110206/1296934235 )
var xds = {
	load: function(url, callback, onerror, retry, callback_key) {
		var url2 = url + (url.indexOf('?')<0?'?':'&') +
								(callback_key?callback_key:'callback') + '=cb';
		if (!url2) return null;
		loading(true);
		var ifr = document.createElement("iframe");
		ifr.style.display = "none";
		document.body.appendChild(ifr);
		var d = ifr.contentWindow.document;
		var cnt = 0; // 二重onload防止
		ifr[ifr.readyState/*IE*/ ? "onreadystatechange" : "onload"] = function() {
			if (this.readyState && this.readyState != 'complete' || cnt++) return;
			if (d.x) {
				if (callback) callback.apply(this, d.x);
			} else if (retry && retry > 1) {
				loading(true); // retry待ち表示
				setTimeout(function(){ xds.load(url, callback, onerror, retry-1);
					loading(false);
				}, 1000);
			} else if (onerror)
				onerror();
			loading(false);
			setTimeout(function(){ try { ifr.parentNode.removeChild(ifr); } catch(e) {} }, 0);
		};
		d.write('<scr'+'ipt>function cb(){document.x=arguments}</scr'+'ipt>' +
				'<scr'+'ipt src="'+url2+'"></scr'+'ipt>');
		d.close();
		return ifr;
	},
	abort: function(ifr) {
		if (ifr && ifr.parentNode) {
			ifr.parentNode.removeChild(ifr);
			loading(false);
		}
	}
}
// プログレスバー表示
var loading_cnt = 0;
function loading(start) {
	loading_cnt += start ? 1 : loading_cnt > 0 ? -1 : 0;
	$('loading').style.display = loading_cnt > 0 ? "block" : "none";
}
</script>
</head>
<body>

<form onsubmit="gettoptracks(this.artist.value); return false;">
<label for="artist">Artist: </label>
<input type="text" name="artist" id="artist" size="30">
<input type="submit" value="Search">
</form>
<img src="data:image/gif;base64,R0lGODlhEAAQAPQAAP///xIAt/j4/EY4xoyE2xcGuDUmwdjW8q6o5SYWvX9213Bm0+Xk9p+Y4cnG7lRIy2FWzwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAFUCAgjmRpnqUwFGwhKoRgqq2YFMaRGjWA8AbZiIBbjQQ8AmmFUJEQhQGJhaKOrCksgEla+KIkYvC6SJKQOISoNSYdeIk1ayA8ExTyeR3F749CACH5BAkKAAAALAAAAAAQABAAAAVoICCKR9KMaCoaxeCoqEAkRX3AwMHWxQIIjJSAZWgUEgzBwCBAEQpMwIDwY1FHgwJCtOW2UDWYIDyqNVVkUbYr6CK+o2eUMKgWrqKhj0FrEM8jQQALPFA3MAc8CQSAMA5ZBjgqDQmHIyEAIfkECQoAAAAsAAAAABAAEAAABWAgII4j85Ao2hRIKgrEUBQJLaSHMe8zgQo6Q8sxS7RIhILhBkgumCTZsXkACBC+0cwF2GoLLoFXREDcDlkAojBICRaFLDCOQtQKjmsQSubtDFU/NXcDBHwkaw1cKQ8MiyEAIfkECQoAAAAsAAAAABAAEAAABVIgII5kaZ6AIJQCMRTFQKiDQx4GrBfGa4uCnAEhQuRgPwCBtwK+kCNFgjh6QlFYgGO7baJ2CxIioSDpwqNggWCGDVVGphly3BkOpXDrKfNm/4AhACH5BAkKAAAALAAAAAAQABAAAAVgICCOZGmeqEAMRTEQwskYbV0Yx7kYSIzQhtgoBxCKBDQCIOcoLBimRiFhSABYU5gIgW01pLUBYkRItAYAqrlhYiwKjiWAcDMWY8QjsCf4DewiBzQ2N1AmKlgvgCiMjSQhACH5BAkKAAAALAAAAAAQABAAAAVfICCOZGmeqEgUxUAIpkA0AMKyxkEiSZEIsJqhYAg+boUFSTAkiBiNHks3sg1ILAfBiS10gyqCg0UaFBCkwy3RYKiIYMAC+RAxiQgYsJdAjw5DN2gILzEEZgVcKYuMJiEAOwAAAAAAAAAAAA==" style="display: none" id="loading">
<div id="result"></div>

</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>last.fm API test</title>
	<script>
	var api_key = '0809689c938abf942a0d980ff25b5689';
	var api_url = "http://ws.audioscrobbler.com/2.0/?method=artist.gettoptracks&api_key="+api_key+"&format=json&autocorrect=1&artist=";

	function $(id) { return document.getElementById(id); }

	// アーティストのtoptracksを取得
	function gettoptracks(artist) {
	xds.load(api_url + artist, function(res) {
	document.res = res;
	if (!res.toptracks)
	$("result").innerHTML = res.message \|\| "APIエラー";
	else
	display_tracks(res.toptracks.track);
	}, function(){
	alert("last.fm APIの呼出しに失敗しました。");
	});
	}

	// 結果表示
	function display_tracks(tracks) {
	if (!tracks) {
	$("result").innerHTML = "見つかりませんでした。";
	return;
	}
	if (!tracks[0]) tracks[0] = tracks; // ヒット数=1
	$("result").innerHTML = "";
	var ele = document.createElement("h1");
	ele.innerHTML = tracks[0].artist.name + " のトップ曲";
	$("result").appendChild(ele);
	ele = document.createElement("ol");
	for (var i = 0; i < tracks.length; i++) {
	var t = tracks[i];
	var e = document.createElement("li");
	var a = document.createElement("a");
	a.href = t.url;
	a.innerHTML = t.name;
	if (t.image && t.image[0]) {
	var img = document.createElement("img");
	img.src = t.image[0]["#text"];
	e.appendChild(img);
	}
	e.appendChild(a);
	ele.appendChild(e);
	}
	$("result").appendChild(ele);
	}

	// クロスドメインJavaScript呼出し ( http://d.hatena.ne.jp/NeoCat/20110206/1296934235 )
	var xds = {
	load: function(url, callback, onerror, retry, callback_key) {
	var url2 = url + (url.indexOf('?')<0?'?':'&') +
	(callback_key?callback_key:'callback') + '=cb';
	if (!url2) return null;
	loading(true);
	var ifr = document.createElement("iframe");
	ifr.style.display = "none";
	document.body.appendChild(ifr);
	var d = ifr.contentWindow.document;
	var cnt = 0; // 二重onload防止
	ifr[ifr.readyState/IE/ ? "onreadystatechange" : "onload"] = function() {
	if (this.readyState && this.readyState != 'complete' \|\| cnt++) return;
	if (d.x) {
	if (callback) callback.apply(this, d.x);
	} else if (retry && retry > 1) {
	loading(true); // retry待ち表示
	setTimeout(function(){ xds.load(url, callback, onerror, retry-1);
	loading(false);
	}, 1000);
	} else if (onerror)
	onerror();
	loading(false);
	setTimeout(function(){ try { ifr.parentNode.removeChild(ifr); } catch(e) {} }, 0);
	};
	d.write('<scr'+'ipt>function cb(){document.x=arguments}</scr'+'ipt>' +
	'<scr'+'ipt src="'+url2+'"></scr'+'ipt>');
	d.close();
	return ifr;
	},
	abort: function(ifr) {
	if (ifr && ifr.parentNode) {
	ifr.parentNode.removeChild(ifr);
	loading(false);
	}
	}
	}
	// プログレスバー表示
	var loading_cnt = 0;
	function loading(start) {
	loading_cnt += start ? 1 : loading_cnt > 0 ? -1 : 0;
	$('loading').style.display = loading_cnt > 0 ? "block" : "none";
	}
	</script>
	</head>
	<body>

	<form onsubmit="gettoptracks(this.artist.value); return false;">
	<label for="artist">Artist: </label>
	<input type="text" name="artist" id="artist" size="30">
	<input type="submit" value="Search">
	</form>
	<img src="data:image/gif;base64,R0lGODlhEAAQAPQAAP///xIAt/j4/EY4xoyE2xcGuDUmwdjW8q6o5SYWvX9213Bm0+Xk9p+Y4cnG7lRIy2FWzwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAFUCAgjmRpnqUwFGwhKoRgqq2YFMaRGjWA8AbZiIBbjQQ8AmmFUJEQhQGJhaKOrCksgEla+KIkYvC6SJKQOISoNSYdeIk1ayA8ExTyeR3F749CACH5BAkKAAAALAAAAAAQABAAAAVoICCKR9KMaCoaxeCoqEAkRX3AwMHWxQIIjJSAZWgUEgzBwCBAEQpMwIDwY1FHgwJCtOW2UDWYIDyqNVVkUbYr6CK+o2eUMKgWrqKhj0FrEM8jQQALPFA3MAc8CQSAMA5ZBjgqDQmHIyEAIfkECQoAAAAsAAAAABAAEAAABWAgII4j85Ao2hRIKgrEUBQJLaSHMe8zgQo6Q8sxS7RIhILhBkgumCTZsXkACBC+0cwF2GoLLoFXREDcDlkAojBICRaFLDCOQtQKjmsQSubtDFU/NXcDBHwkaw1cKQ8MiyEAIfkECQoAAAAsAAAAABAAEAAABVIgII5kaZ6AIJQCMRTFQKiDQx4GrBfGa4uCnAEhQuRgPwCBtwK+kCNFgjh6QlFYgGO7baJ2CxIioSDpwqNggWCGDVVGphly3BkOpXDrKfNm/4AhACH5BAkKAAAALAAAAAAQABAAAAVgICCOZGmeqEAMRTEQwskYbV0Yx7kYSIzQhtgoBxCKBDQCIOcoLBimRiFhSABYU5gIgW01pLUBYkRItAYAqrlhYiwKjiWAcDMWY8QjsCf4DewiBzQ2N1AmKlgvgCiMjSQhACH5BAkKAAAALAAAAAAQABAAAAVfICCOZGmeqEgUxUAIpkA0AMKyxkEiSZEIsJqhYAg+boUFSTAkiBiNHks3sg1ILAfBiS10gyqCg0UaFBCkwy3RYKiIYMAC+RAxiQgYsJdAjw5DN2gILzEEZgVcKYuMJiEAOwAAAAAAAAAAAA==" style="display: none" id="loading">
	<div id="result"></div>

	</body>
	</html>