30 sep

HTML5: Generador de imágenes aleatorias para slideshow musical

Con el objetivo inicial de investigar la posibilidades multimedia del html5, fundamentalmente lo que es la etiqueta audio y sus capacidades. Desarrollé esta aplicación que permite leer un archivo de audio (mp3/ogg) de un tema, asociarlo a un archivo en formato json que muestra la letra de la canción en cuestión y generar un slideshow de imágenes con los resultados del servicio de google image search haciendo búsquedas con las palabras de la letra de la canción. diagrama de aplicación

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.

Aca se puede ver finalmente la demo



Comments are closed.



Contacto