Visualizar texto/imagen sin salir de la pagina

andres0993 · 24 Noviembre 2011, 17:23 PM

Buenas, tengo una página web de música y lo que quiero hacer es poner letras a la música, ósea que haya un icono al lado de la música y que al darle clic al icono se visualice la letra de la canción sin salir de la página, lo mejor sería que el contenido se descargara de otra página o algo por el estilo ya que no quiero añadir muchos archivos a la página para que no se demore en abrir y no aburra a los usuarios. Gracias por su atención.

dario silva · 24 Noviembre 2011, 18:39 PM

Puedes poner un atributo html de información al icono de la música y ahí la letra

EFEX · 24 Noviembre 2011, 18:53 PM

Sobre el icono se puede hacer con jquery.

funciòn .toggle():
http://api.jquery.com/toggle/

Con lo demas tendras que tomar los valores con jquery(el nombre del artista y la canciòn), pero desconozco un servicio para lyrics como para que te de como resultado el lyrics de la cancion.

EFEX · 24 Noviembre 2011, 19:52 PM

Aca encontrè uno, el mas rapido que encontre en algunas busquedas, bastante bien para lo que se necesita www.chartlyrics.com/api.aspx.
El uso es simple, definimos lo que vamos a buscar(este es para que nos devuelva ademas del artista y la cancion, tambien el cover y los lyrics

)

Citarhttp://api.chartlyrics.com/apiv1.asmx/SearchLyricDirect?artist=artista&song=canciòn

Y la respuesta... en XML

Código (xml) [Seleccionar]


<GetLyricResult>
<TrackId>0</TrackId>
<LyricChecksum>a9837bc354ad5a755ef5c98fde69f86a</LyricChecksum>
<LyricId>9701</LyricId>
<LyricSong>Refuse/Resist</LyricSong>
<LyricArtist>Sepultura</LyricArtist>
<LyricUrl>http://www.chartlyrics.com/OciTHecidk-thNJwOe_ASA/Refuse%2fResist.aspx</LyricUrl>
<LyricCovertArtUrl>http://ec1.images-amazon.com/images/P/B000000H4V.01.MZZZZZZZ.jpg</LyricCovertArtUrl>
<LyricRank>9</LyricRank>
<LyricCorrectUrl>http://www.chartlyrics.com/app/correct.aspx?lid=OQA3ADAAMQA=</LyricCorrectUrl>
<Lyric>Chaos AD
Tanks on the streets
Confronting Police
Bleeding the Plebs
Raging crowd
Burning cars
Bloodshed starts
Who'll be alive?!

Chaos AD
Army in siege
Total alarm
I'm sick of this
Inside the state
War is created
No Man's land
What is this shit?!

Refuse/Resist
Refuse

Chaos AD
Disorder Unleashed
Starting to burn
Starting to lynch
Silence means death
Stand on your feet
Inner fear
Your worst enemy

Refuse/Resist
Refuse/Resist</Lyric>
</GetLyricResult>

Y solo resta leer los datos XML con JQuery

andres0993 · 24 Noviembre 2011, 20:09 PM

Bueno la verdad no eh utilizado JQuery y no se que es lo que realmente haria este programa. Me lo podrias explicar mejor? Abre una nueva ventana? Oculta datos para mostrarlos luego?. Y donde copio el codigo o como le hago?

EFEX · 25 Noviembre 2011, 18:28 PM

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 jQuery
http://www.librosweb.es/ajax/capitulo10/la_libreria_jquery.html

Vamos al codigo, armè 2 archivos, el index.html y get.php.

index.htm

Código (php) [Seleccionar]


<!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

Código (php) [Seleccionar]


<?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

Test Foro de elhacker.net SMF 2.1

Visualizar texto/imagen sin salir de la pagina

andres0993

dario silva

EFEX

EFEX

andres0993

EFEX