La incorporación de audio en la entrada de un blog, wiki, moodle, joomla o página web es una necesidad que surge en múltiples contextos del ámbito educativo: grabación de locuciones, lecturas, entrevistas, debates, noticias, composiciones musicales, interpretaciones instrumentales, etc, etc.
En Internet existe un amplio catálogo de reproductores MP3 pensados para integrarse en una página web. En este artículo se proponen 3 modelos gratuitos con un nivel de complejidad creciente en cuanto a su configuración (iniciación, medio y avanzado):
Características
La elección de estas soluciones se ha basado en sus múltiples e interesantes prestaciones:
- Flexibilidad. Admiten la configuración de un amplio catálogo de parámetros: nombre y ubicación del MP3 o lista de reproducción, imagen asociada, apariencia, color, reproducción contínua, aleatoria, al inicio, etc.
- Control. Ofrecen al lector de la página web una consola que le permite controlar la reproducción del audio.
- Integración. Proporcionan un sistema fácil, limpio y elegante para integrar un audio en una página web.
- Flash. Se trata de archivos *.SWF diseñados con tecnología Flash. Para su correcta visualización es necesario que el navegador web cliente disponga del plugin de Flash Player.
- Fiabilidad. Su funcionamiento se demuestra robusto y fiable.
- Estándares. Utilizan formatos estándar de listas de reproducción XML, archivos de audio MP3, imágenes JPG, etc.
Instrucciones de uso
Paso 1. Creación del audio MP3.
Elabora uno o varios MP3 utilizando un programa de grabación y edición de audio como por ejemplo Audacity. Otra posibilidad es descargarlos del Banco multimedia del ITE-MEC. Para experimentar puedes utilizar el audio MP3 que se proporciona en este archivo: paraelisa.zip
Paso 2. Conseguir el reproductor SWF.
Para conseguir el archivo SWF del reproductor puedes descargar desde aquí la versión indicada o bien visitar la página web oficial de cada uno para comprobar si es posible obtener una versión más actual.
- WP Audio Player: Sitio web oficial | player.zip (v 2.0)
- DewPlayer: Sitio web oficial | dewplayer-bubble-vol.zip (v. 2011) (*)
- JWPlayer: Sitio web oficial | jwplayer.zip (version 5.8)
(*) DewPlayer ofrece en su página web la descarga de varios modelos de reproductores. Este zip contiene solo uno de ellos (bubble-vol).
Paso 3. Subir los archivos.
Es necesario subir a tu sitio web: el reproductor SWF, el audio MP3 y la imagen JPG asociada al audio. Si has decidido experimentar con el audio MP3 ofrecido anteriormente entonces puedes utilizar la imagen que se proporciona en este archivo: beethoven.zip
Para alojar estos 3 archivos en la red caben distintas alternativas:
Sitio web personal. Puedes crear una carpeta en tu espacio web personal (audio) y subir a él los archivos. Copia la URL de ubicación de estos archivos. Ejemplo:
SWF: http://canaltic.com/audio/<nombre_reproductor>.swf
MP3: http://canaltic.com/audio/<nombre_audio>.mp3
JPG: http://canaltic.com/audio/<nombre_imagen>.jpg
Google Sites. Si dispones de cuenta en Google, puedes acceder a Google Sites y crear un sitio y dentro del mismo crear una carpeta con el nombre audio. Sube todos los archivos a la misma y luego haz clic en el enlace “Ver” del archivo SWF que acabas de subir. Copia y pega en un bloc de notas la dirección que se muestra en la barra de direcciones del navegador. Es una dirección compleja donde debes eliminar el código final a partir de “<nombre_reproductor>.swf”. Consigue la dirección del resto de archivos subidos sustituyendo simplemente el nombre del archivo en la URL que acabas de obtener. Ejemplo:
SWF: https://<codigo_alfanumerico>/site/<nombre_sitio>/audio/<nombre_reproductor>.swf
MP3: https://<codigo_alfanumerico>/site/<nombre_sitio>/audio/<nombre_audio>.mp3
JPG: https://<codigo_alfanumerico>/site/<nombre_sitio>/audio/<nombre_imagen>.jpg
DropBox. Si dispones de cuenta en DropBox, crea una carpeta con el nombre audio en Public y dentro de esa carpeta sube los archivos. Desde el explorador de archivos del sistema windows haz clic derecho sobre cada archivo subido para elegir DropBox > Copiar enlace público. Si utilizas el interfaz web de Dropbox, haz clic sobre el archivo y elige Copiar enlace público. Ejemplo:
SWF: http://dl.dropbox.com/u/<numeros>/audio/<nombre_reproductor>.swf
MP3: http://dl.dropbox.com/u/<numeros>/audio/<nombre_audio>.mp3
JPG: http://dl.dropbox.com/u/<numeros>/audio/<nombre_imagen>.jpg
Paso 4. Generar el código embed.
En canalTIC.com se ha diseñado un asistente que facilita la generación del código embed para la integración de cada uno de estos reproductores:
En el asistente elegido despliega el combo Modelos de configuración y selecciona una opción. En la sección de Vista previa se mostrará el aspecto que tendrá el reproductor con esa configuración. En los cuadros de texto: URL reproductor SWF, URL audio MP3 y URL imagen sustituye las URL locales por las direcciones de estos archivos alojados en tu espacio web. El reproductor WordPress Audio Player es el más sencillo y por ello no utiliza archivo de imagen. Tampoco la utilizan ciertos modelos de DewPlayer y JWPlayer.
Cada modelo de configuración define ciertos valores para algunos de los parámetros básicos y avanzados. Cuando hayas elegido un modelo es posible modificar manualmente el valor de todos los parámetros ofrecidos en el asistente. Para que el código embed pille los cambios introducidos no olvides al final hacer clic en el enlace «recargar reproductor«. Si todo va bien el reproductor se mostrará con la configuración definida en el apartado vista previa.
Si eliges un modelo que utiliza una lista de reproducción , como por ejemplo «Dewplayer PlayList …» o «JWPlayer Lista MP3 …» entonces es necesario editar con el Bloc de Notas el archivo XML que contiene la lista de reproducción (playlist.zip). Una lista de reproducción es un archivo de texto con una sintaxis de etiquetas que contienen las URL de los archivos MP3 e imagen JPG. El reproductor lee esta información para cargar las pistas de audio correspondientes. Una vez personalizada la lista XML es necesario subirla a tu espacio web, obtener la URL absoluta de esa lista y en el configurador sustituir el contenido de la casilla «URL de la lista XML».
Paso 5. Copiar/pegar el código embed
Selecciona el código embed que te proporciona el configurador para luego copiarlo y pegarlo en el código HTML de tu página web.
Descarga
- WP Audio Player reproductor SWF: player.zip (v 2.0)
- DewPlayer reproductor SWF: dewplayer-bubble-vol.zip (v. 2011)
- JWPlayer reproductor SWF: jwplayer.zip (version 5.8)
- Audio MP3: paraelisa.zip
- Imagen JPG: beethoven.zip
- Listas de reproducción: playlist.zip
Más información