domingo, 28 de septiembre de 2014

Lista de reproducción con audio.js (2)








Quedaba pendiente la explicación de cómo había creado la lista de reproducción con audio.js.
Como es algo complicado, he subido a mi servidor una versión comprimida de todos los archivos necesarios para que funcione tal como se muestra justo aquí debajo la lista.
A veces da un error de carga en el reproductor pero, a pesar de ese error, el archivo suena.
Un problema añadido es que parte del final de los temas queda por debajo de la imagen de la explicación de los atajos de teclado para hacer sonar el tema anterior o el siguiente. Es por esto que yo he añadido debajo del listado de los temas, una imagen. En este caso de Gabriel Celaya.
El único archivo que hay que editar es la página index.html con la ruta de los mp3 (que previamente habrá que haber subido a nuestro servidor) dentro de la lista ordenada de ítems con las explicaciones del título de cada tema y autor, así como el título de la página (en este caso "Interpretando la poesía de Gabriel Celaya" que va entre las etiquetas <h1>.


Puedes descargar el archivo comprimido desde aquí..
Al descomprimirlo se verá:
- Una carpeta audiojs con cuatro archivos dentro:
audio.min.js
audiojs.swf
jquery.js
player-grafics.gif
- Y dos archivos externos
index.html
imagen.png
Se edita el index.html tal como se ha indicado y se sube todo al servidor.
Una vez hecho esto se incrusta con un iframe en la entrada del blog o web.
O, como alternativa HTML 5, se coloca:

<object type="text/html" data="http://www.ladireccioncorrespondiente.html" width="500" height="600"> </object>

1 comentario:

Félix Eduardo León Sosa dijo...

Oye N MILLÓN DE GRACIAS!!!!!!! Tenia como una semana buscando hacer lo que tu me has enseñado y estoy muy agradecido.

Con respecto a que los temas quedan por debajo de la imagen de explicación creo que los puedes resolver eliminando el atributo "position: fixed" al momento de establecer los estilos en el id #shortcuts.

Nuevamente gracias!

Related Posts Plugin for WordPress, Blogger...