En un array js guardo los nombres de los temas que hacen al playlist. Estos los nombres de los archivos mp3 (google chrome, internet explorer 9) y ogg vorbis (mozilla firefox) y de los archivos json que tienen seteado el minuto en que aparece el texto.
Ejemplo de letra en formato json
{"song":[
{
"time":"00:06",
"lyrics":"Spiderman, Spiderman"
},
{
"time":"00:09",
"lyrics":"Does whatever a spider can"
},
{
"time":"00:11",
"lyrics":"Spins a web any size"
},
...
Usando esta librería js que me permite leer las etiquetas ID3 de los archivos mp3 es lo que uso para mostrar el nombre del grupo, disco y nombre del tema
A la ejecución del evento timeupdate del elemento audio de html5, busca en el json el minuto declarado. Cuando el tiempo actual de la canción coincide con esa declaración muestra el texto.
evento timeupdate del elemento audio
var ap = document.getElementById("audioplayer");
ap.src = archivoAu;
ap.addEventListener("timeupdate",actualizarData,false);
función “actualizarData” que se ejecuta al timeupdate
function actualizarData(ev){
var total = utils.segundos_a_min(Math.floor(ev.target.duration)) ;
var minActual = utils.segundos_a_min(Math.floor(ev.target.currentTime));
imgS.cargarImagenes($("#currentT").html())
for(i=0;i<lyrics.song.length;i++){
if(lyrics.song[i].time == minActual){
$("#currentT").html(lyrics.song[i].lyrics);
if(init){
clearTimeout(t);
}
$("#currentT").css("opacity","0.5");
t = setTimeout(function(){$("#currentT").css("opacity","0")},4000);
init = true;
}
}
en la función anterior se puede ver el objeto imgS y su método “cargarImagenes” que pasa como parametro el contenido del div “#currentT” . En esta parte es cuando entra el API del google image search.
En el método cargarImagenes es donde traigo el objeto google que es parseado cuando se completó la búsqueda:
imageSearch = new google.search.ImageSearch();
imageSearch.setSearchCompleteCallback(this,searchComplete, null);
imageSearch.setResultSetSize(8);
imageSearch.execute(mistr);
“mistr” es el string con la palabra a buscar.
Al completarse la búsqueda se ejecuta un callback con la función “searchComplete” que contiene el siguiente código:
if (imageSearch.results && imageSearch.results.length > 0) {
var randomnumber=Math.floor(Math.random()*8);
var results = imageSearch.results;
var result = results[randomnumber];
$("#cont").html("<img src='"+result.url +"' height='100%' />")
}
Siembre estará buscando una foto aleatoria dentro de la primera página de resultados de google image search. El número 8 está dado porque es el máximo de resultados por página. Obviamente el código está visible en la misma aplicacion.
Comments are closed.