Hola andres, JQuery es una libreria javascript y tiene un buen propòsito... tenes funciones para el teclado, mouse, modificar html, css, etc muchas mas. Si queres verlo mas a fondo te recomiendo este sitio para que te vallas asimilando con esta libreria.
La librería jQueryhttp://www.librosweb.es/ajax/capitulo10/la_libreria_jquery.htmlVamos al codigo, armè 2 archivos, el index.html y get.php.
index.htm<!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>
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;
?>
El resultado
Autor
En línea
