Supongo que a veces habréis entrado en un Tumblr y os habrá empezado a sonar música. Muchas veces es música preciosa, y los creadores de la página tienen una lista de reproducción entera de música que escucharíamos horas y horas. Normalmente, estas playlists son creadas con un pluggin llamado SCM Music Player.
*Voy a usar un blog, pero no os voy a dar la URL por privacidad :).
 |
| Aquí podemos ver el reproductor y la playlist. |
Mi primer intento fue dar clic derecho al elemento de la playlist y guardar como, pero con esto solo conseguía bajarme el source code de la web(el source code es todo el código que forma una web. Usando Chrome, podéis darle a Control + U para verlo, o bien ir al botón de arriba a la derecha (que son como tres barritas horizontales), poner el ratón encima de "Herramientas" y clicar en "Ver código fuente").
Como este primer intento no funcionó, decidí buscar en el código ese elemento de la playlist, a ver si encontraba un link hacia el archivo de sonido. Para buscar un elemento determinado del código, Chrome nos permite "Inspeccionar Elemento", así que le daremos clic derecho al elemento de la playlist y clicaremos en "Inspeccionar elemento". Se nos abrirá el inspector y encontramos esto:
 |
| Observamos en el código cada elemento de la playlist (separado en un rectángulo rojo) |
<li class="item focus odd" data-bind="
visible:isValid(),
click:$root.play,
css:{focus:on, even:$index()%2==1, odd:$index()%2==0}
">
<span class="title" data-bind="text:title">.</span>
</li>
Tenemos un <li> que define una lista (li viene de "list"). Dentro, llama a una clase (item focus odd), y básicamente dice que es visible (visible:isValid()) y que si se clica, que se reproduzca (click:$root.play).
Luego tenemos un <span>, que define un espacio a rellenar en el código, aquí el de un título (<span class="title" data-bind="text:title">.</span>. Entre > y < encontramos . . Este es el título que se le puso a la canción para que se viera en la playlist.)
De aquí me di cuenta de que probablemente el link estuviera oculto, así que me puse a pensar un poco. Si os fijáis hay una pestaña en el inspector que se llama "Network". Esto básicamente son todas las entradas y salidas solicitadas a la web, así que podemos monitorizarlas, y ver a donde manda la petición el código cuando le damos al play (¿Tiene sentido, no? Es decir, estamos pidiendo que reproduzca algo, ¿pero el qué? Este qué es lo que pide la web a otra web para reporducir, y lo que nosotros podemos controlar a través de la pestaña "Network").
Si le damos al play veremos que en la pestaña empiezan a aparecer cosas.
 |
| La pestaña "Network" y los datos que nos proporciona. |
Si clicamos en ese "Path", nos encontraremos con un montón de datos, pero no os asustéis, nosotros solo buscamos dos: el "Request URL" y el "Request Method".
 |
| Request URL y Request Method resaltados para que los veáis mejor. |
Ahora, si intentáramos reproducir la URL que sale, no podríamos, porque nosotros cuando vemos un vídeo pedimos ver el vídeo, así que, por mucho que copiemos y peguemos el link en la barra del navegador, no nos va a llevar a ningún sitio, ya que estamos pidiendo un request, y no un vídeo. Pero, sí que vemos que es un vídeo de Youtube, lo cual nos facilita todo el proceso de encontrar el vídeo.
Los vídeos de Youtube funcionan con una ID propia para cada vídeo, que se asigna al mismo en el momento en el que se sube a la página. Si os paráis un segundo a mirar el link vemos que la ID está ahí.
También, si alguna vez os habéis parado a mirar como funcionan las URLs de Youtube veréis que siempre son así :
https://www.youtube.com/watch?v=[ID]Así que, ya pude ver mi canción en Youtube. Y estaba super feliz. Pero... luego me quedé pensando y, la verdad, no podía ser que fuera tan difícil. Es decir, SCM Player te obliga a poner el link de las canciones en el código. Así que... corrí a la web, le dí a Ctrl + U y luego busqué (Ctrl + F) "SCM Music Player", para ir a la parte del código donde empieza el pluggin. Y, efectivamente, tampoco era tan difícil.
 |
| Precioso mi fail, ¿eh? |
De todos modos aprendí a hacer seguimiento de requests mediante cookies, que nunca está de más, ¿no?
¡Saludos a todos!
