jueves, 4 de noviembre de 2010

Escuchar música en ventana Pop-Up

Un comentario muy común que suelen hacer es que es bastante incómodo escuchar música en un blog y que al entrar a otra entrada, página o cualquier otra sección del blog la música deje de escucharse y empiece de nuevo desde la primera canción.
Sí, es desagradable que la música se detenga justo cuando ya estábamos cantando pero hay que entender que si cambiamos de página entonces todos los elementos cargarán de nuevo. Todos.
Pues la página debe de cargar todo lo que haya dentro de ella y eso incluye a los reproductores.

Así que lo que podemos hacer es poner el reproductor de música dentro de una página independiente al blog para que, hagamos lo que hagamos en el blog esa pequeña página no tenga que cargar nada de nuevo y tus lectores puedan escuchar la música sin que se interrumpa. Para ello crearemos un documento HTML simple y haremos que éste se abra en una ventana pop-up (ventana emergente) con una función Javascript por lo que no tendremos que recurrir a librerías externas ni códigos largos.

El resultado será este:


Escuchar música



Primero vamos a crear la página del reproductor, para eso abrimos el Bloc de notas y dentro de él pegamos esto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Musica</title>
</head>
<body>

...Aquí pegamos el código del reproductor...

</body>
</html>

Ahora pegamos donde se indica, el código del reproductor que queremos, yo he usado el reproductor de Windows Media Player que usamos para la radio online y con una lista de reproducción, aunque tú puedes usar prácticamente cualquier otro que quieras, en la sección Música encontrarás unos cuantos.

Ya que has pegado el código del reproductor ve a Archivo | Guardar como... y ponle el nombre musica.html o con cualquier otro nombre pero al final deberá decir .html
Luego cambia el Tipo a Todos los archivos, y dale Guardar.
Con esto lo estaremos guardando en formato de página Web, así que probablemente te aparezca un mensaje de advertencia donde te dirá que estás guardando el archivo en otro formato, sólo da click en para guardar el archivo.



Habiendo hecho esto subimos el archivo a un hosting.
Ahora sólo vamos a Diseño | Añadir gadget | HTML/Javascript y ahí pegamos este código:
<a href="javascript:void(0);" onclick="window.open('URL del archivo', 'popup', 'left=390, top=200, width=310, height=30, toolbar=0, resizable=1')" style="text-decoration: none;" title="Escuchar música">
<table border="0" cellpadding="5"><tbody>
<tr><td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv51r8gH_JHKi7gflm-FNH1k1PJVHQhAPu5LFgNO1N1-dojEA3AE32A7Os2fGjm2fE-6L8HZLqoEBLUcOzvkATWY6nhXG-HUdzzOs8VMRdYW07fAToG6EWjV_5rv-xJ86vpo5ygef1kW8/s1600/player_volume.png" /></td>
<td><span style="font-family: Impact; font-size: x-large;">Escuchar música</span></td></tr>
</tbody></table></a>
Cambiamos donde se indica  la URL del archivo que subimos previamente y listo.

En donde dice width=310 height=30 podemos cambiar el ancho (width) y alto (height) que tendrá la ventana pop-up, esto dependiendo del tamaño del reproductor que hayamos puesto.
Y la URL que está en color verde es la que corresponde al icono de la imagen, también puedes cambiarlo si lo deseas.

De esta forma tus lectores podrán escuchar la música sin interrupciones sin importar si entran a otro post o si simplemente cierran la pestaña de tu blog, la música continuará.

No hay comentarios:

Publicar un comentario