empirefx/get.php

## get.php
<?php
/*  Obtenemos $artista y $cancion enviados mediante jquery */
$artista = urlencode($_GET['artista']);
$cancion = urlencode($_GET['cancion']);
/*  Enviamos la peticion al sitio api.chartlyrics.com y este
	nos responde con formato xml */
$url = "http://api.chartlyrics.com/apiv1.asmx/SearchLyricDirect?artist=$artista&song=$cancion";
$str = file_get_contents($url);
echo $str;
//RESULTADO http://img233.imageshack.us/img233/9224/65030479.jpg
?>

## gistfile1.html
<!DOCTYPE html>
<html>
<head>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<style type="text/css">
	.lyrics {
		/*  Este es el recuadro que se mostrara por pantalla, solo le agrege
			cosas como ancho, color, donde posicionarlo en el browser. */
		background-color: #FFFFD8;
		width:480px;
		padding:10px;
		/*  Ocultamos el recuadro por ahora, no hace falta mostrarlo */
		display:none;
		position:relative;
		top:-50px;
		right:-160px;
		/*  Para que no se colapse los espacios en blanco y salto de linea */
		white-space: pre;
	}
	.lyrics img{
		/*  Posiciono la imagen(cover del disco) a la derecha del recuadro */
		float:right;
	}
	</style>
	<script type="text/javascript">
	$(document).ready(function(){
		/*  Al ahcer click sobre #mostrarlyrics hacer lo siguiente */
		$('#mostrarlyrics').click(function() {
			/*  Tomo el texto que haya en div.artista y div.cancion */
			var artista = $(".artista").text();
			var cancion = $(".cancion").text();
			/*  Procesas los datos obtenidos con el archivo .php */
			$.ajax({
				type: "GET",
				url: "get.php?artista="+artista+"&cancion="+cancion,
				dataType: "html",
				success: function(xml) {
					/*  Una ves que obtenemos el resultado del sitio buscamos
					lo que nos interesa, <LyricCovertArtUrl> y <Lyric> dentro
					del resultado xml.
					Este seria el resultado:
						(http://api.chartlyrics.com/apiv1.asmx/SearchLyricDirect?artist=sepultura&song=roots%20bloody%20roots)
					*/
					var lyric = $(xml).find('Lyric').text();
					var tapadisco = $(xml).find('LyricCovertArtUrl').text();
					/*  Reemplazamos lo que haya en div.lyrics por el cover y
						el lyric de la cancion */
					$('.lyrics').html( "<img src="+tapadisco+"/>"+lyric );
				}
			});

			$('.lyrics').toggle('fast');
		});
	});
	</script>
</head>
<body>
	<div class="artista">sepultura</div>
	<div class="cancion">roots bloody roots</div>
	<a href="#" id="mostrarlyrics">Click aqui</a> para ver los lyrics de la cancion.
	<div class="lyrics"><img src="http://www.costacruceros.es/B2C/Images/Skin/Default/gfx/ico_waiting.gif"/></div>
</body>
</html>
	<?php
	/* Obtenemos $artista y $cancion enviados mediante jquery */
	$artista = urlencode($_GET['artista']);
	$cancion = urlencode($_GET['cancion']);
	/* Enviamos la peticion al sitio api.chartlyrics.com y este
	nos responde con formato xml */
	$url = "http://api.chartlyrics.com/apiv1.asmx/SearchLyricDirect?artist=$artista&song=$cancion";
	$str = file_get_contents($url);
	echo $str;
	//RESULTADO http://img233.imageshack.us/img233/9224/65030479.jpg
	?>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<style type="text/css">
	.lyrics {
	/* Este es el recuadro que se mostrara por pantalla, solo le agrege
	cosas como ancho, color, donde posicionarlo en el browser. */
	background-color: #FFFFD8;
	width:480px;
	padding:10px;
	/* Ocultamos el recuadro por ahora, no hace falta mostrarlo */
	display:none;
	position:relative;
	top:-50px;
	right:-160px;
	/* Para que no se colapse los espacios en blanco y salto de linea */
	white-space: pre;
	}
	.lyrics img{
	/* Posiciono la imagen(cover del disco) a la derecha del recuadro */
	float:right;
	}
	</style>
	<script type="text/javascript">
	$(document).ready(function(){
	/* Al ahcer click sobre #mostrarlyrics hacer lo siguiente */
	$('#mostrarlyrics').click(function() {
	/* Tomo el texto que haya en div.artista y div.cancion */
	var artista = $(".artista").text();
	var cancion = $(".cancion").text();
	/* Procesas los datos obtenidos con el archivo .php */
	$.ajax({
	type: "GET",
	url: "get.php?artista="+artista+"&cancion="+cancion,
	dataType: "html",
	success: function(xml) {
	/* Una ves que obtenemos el resultado del sitio buscamos
	lo que nos interesa, <LyricCovertArtUrl> y <Lyric> dentro
	del resultado xml.
	Este seria el resultado:
	(http://api.chartlyrics.com/apiv1.asmx/SearchLyricDirect?artist=sepultura&song=roots%20bloody%20roots)
	*/
	var lyric = $(xml).find('Lyric').text();
	var tapadisco = $(xml).find('LyricCovertArtUrl').text();
	/* Reemplazamos lo que haya en div.lyrics por el cover y
	el lyric de la cancion */
	$('.lyrics').html( "<img src="+tapadisco+"/>"+lyric );
	}
	});

	$('.lyrics').toggle('fast');
	});
	});
	</script>
	</head>
	<body>
	<div class="artista">sepultura</div>
	<div class="cancion">roots bloody roots</div>
	<a href="#" id="mostrarlyrics">Click aqui</a> para ver los lyrics de la cancion.
	<div class="lyrics"><img src="http://www.costacruceros.es/B2C/Images/Skin/Default/gfx/ico_waiting.gif"/></div>
	</body>
	</html>