sábado, 19 de enero de 2008

Insertar un reproductor multimedia

Dificultad: media.

Una posibilidad que no viene incluida con Blogger, y que sí podemos encontrar en otros servicios como el que ofrece MySpaces, es la posibilidad de tener un reproductor multimedia donde podamos hacer sonar nuestras canciones favoritas. Esto puede tener también otras utilidades, como recoger grabaciones a entrevistas, fragmentos de textos declamados que queramos poner como ejemplo, etc, etc. Definitivamente, el audio es un formato que también tiene múltiples aplicaciones educativas.

En este artículo aprenderemos a insertar un reproductor multimedia compatible con el formato MP3. Hay otros reproductores que también permiten la ejecución de vídeos sin tener que hacerlos pasar antes por YouTube o Google Video.

El reproductor que utilizaremos se llama DewPlayer. He elegido este por su simplicidad y ligereza de peso, pero podéis escoger otro vosotros si lo conocéis. La página de descarga del autor es . Está en francés. Los que quieran experimentar las posibilidades de este reproductor pueden dedicar tiempo a esta página. Para los demás, incluiré un ejemplo sencillo de utilización.

Vamos allá con el primer paso: localizar el archivo MP3 que queremos reproducir. Debe estar previamente colgado en la web y accesible desde una URL.

Ahora, para insertarlo en una entrada, deberemos pasar en la misma a la vista "Edición de HTML", vista anteriormente, y pegar el siguiente fragmento de código:

<object type="application/x-shockwave-flash" data="http://www.alsacreations.fr/flashdir/dewplayer.swf?mp3=url_fichero_mp3" width="200" height="20">
<param name="movie" value="http://www.alsacreations.fr/flashdir/dewplayer.swf?mp3=
url_fichero_mp3"/>
</object>


Cambiando las dos apariciones de url_fichero_mp3 por la URL del fichero MP3 que queramos reproducir. Por ejemplo, si quiero utilizar como fichero de audio el primer capítulo leído del Quijote, disponible desde el portal de educación del Gobierno de Aragón desde el enlace http://www.aularagon.org/files/espa/elquijote/p1/Parte 1 Capítulo-01.mp3 (obtenido al seleccionar con el botón derecho y copiar ruta del enlace el Capítulo 1) deberé escribir en la vista de edición de HTML lo siguiente:

<object type="application/x-shockwave-flash" data="http://www.alsacreations.fr/flashdir/dewplayer.swf?mp3=http://www.aularagon.org/files/espa/elquijote/p1/Parte 1 Capítulo-01.mp3" width="200" height="20">
<param name="movie" value="http://www.alsacreations.fr/flashdir/dewplayer.swf?mp3=http://www.aularagon.org/files/espa/elquijote/p1/Parte 1 Capítulo-01.mp3"/>
</object>


El resultado al publicar sería:




Miguel de Cervantes Saavedra. El ingenioso hidalgo Don Quijote de la Mancha. Capítulo 1º.





Otra posibilidad será reproducir un fichero previamente subido a nuestro sitio web de Google Pages. Por ejemplo, tengo subidos a tutometablog.googlepages.com dos ficheros de audio, con las voces de Camilo José Cela y Francisco Umbral, grabadas en 2003 con motivo del 25º Aniversario de la Constitución Española:Para insertar el primer fichero, lo selecciono con el botón derecho, elijo en el menú emergente la opción "Copiar la ruta del enlace" y eso será lo que pegue en vez del texto resaltado anteriormente:

<object type="application/x-shockwave-flash" data="http://www.alsacreations.fr/flashdir/dewplayer.swf?mp3=http://tutometablog.googlepages.com/art04_cjcela.mp3" width="200" height="20">
<param name="movie" value="http://www.alsacreations.fr/flashdir/dewplayer.swf?mp3=http://tutometablog.googlepages.com/art04_cjcela.mp3"/>
</object>


Obteniendo el siguiente resultado al publicar:




Voz de Camilo José Cela






Y lo mismo con el el segundo fichero. Copiaría:

<object type="application/x-shockwave-flash" data="http://www.alsacreations.fr/flashdir/dewplayer.swf?mp3=http://tutometablog.googlepages.com/art17_fcoumbral.mp3" width="200" height="20">
<param name="movie" value="http://www.alsacreations.fr/flashdir/dewplayer.swf?mp3=http://tutometablog.googlepages.com/art17_fcoumbral.mp3
"/>
</object>


Y como resultado obtendría:




Voz de Francisco Umbral







Nota importante: Debido a los nuevos criterios de seguridad de los navegadores, es probable que este código no se vea bien en todos. Para ello, es mejor emplear el código de un Google Gadget colocado en un objeto <iframe> que un usuario de blogs ha desarrollado. Os copio y pego el código con una canción de Fito y Fitipaldis (Sullivan Street) como pista sonora. Un saludo y gracias al desarrollador:

<iframe title="Embed Music" width="200" height="45" scrolling="no" frameborder="0" id="1321430542" name="1321430542" allowtransparency="true" class="igm" src="//urlaacjrode9jse93p741t2n1ibbufaq-a-sites-opensocial.googleusercontent.com/gadgets/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/105629041657992777031/embed-music.xml&amp;container=enterprise&amp;view=default&amp;lang=en&amp;country=ALL&amp;sanitize=0&amp;v=6ced7fd38a9bccd&amp;up_hide&amp;up_loop=false&amp;up_auto=false&amp;up_bg&amp;up_mime=audio/mpeg&amp;up_url=http://germanlo.googlepages.com/06-214SullivanStreet.mp3&amp;libs=core:dynamic-height:idi&amp;mid=144&amp;parent=https://sites.google.com/site/mori79/html-gadgets/media-players#st=e%3DAIHE3cCkXTmVvxP0ZRAHEXp17OlOvBFg6Xw008LDGZSE%252F1fBKexUW%252BeMXTo%252FSYAabcN%252FtKDMOM8MqiEQfTIjSiO6W77yTW9QlA%252F%252Bz7Yl0dVKwOWuo5uu7TPbl%252FtDNjfh5HX0J%252FceG%252Fjn%26c%3Denterprise&amp;rpctoken=1639199637196496882"></iframe>

El resultado lo tenéis en el gadget de arriba a la derecha ("Para animar la visita").




Como práctica, inserta un reproductor de audio que funcione con los ficheros de audio propuestos u otros que encuentres en la web. Posteriormente, pruébalo con tus propios ficheros de audio, una vez subidos a tu sitio web de Google Pages.

No hay comentarios: