En distintas situaciones del contexto educativo se hace necesario incorporar un audio al artículo de un blog, wiki, moodle, joomla o similar. Con el auge de las tabletas y los móviles se impone buscar soluciones tecnológicas alternativas a Flash que permitan integrar estos elementos multimedia en una página web para que sean accesibles desde cualquier tipo de dispositivo. En este artículo se documentan algunos ejemplos.
En Internet se ofrecen distintos reproductores MP3 diseñados en tecnología HTML5 + CSS3 + Javascript y pensados para integrarse en una página web. Se proponen tres 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 atractivas prestaciones:
- Flexibilidad. Admiten la configuración de un cierto repertorio de parámetros: nombre y ubicación del MP3 o lista de reproducción, 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.
- HMTL5. Se trata de soluciones alternativas a la tecnología Flash. Para su correcta visualización es necesario que el navegador web cliente admita la ejecución de Javascript lo cual suele venir establecido por defecto.
- Fiabilidad. Su funcionamiento se ha comprobado robusto y fiable.
- Estándares. Utilizan formatos estándar de listas de reproducción, archivos de audio MP3 y OGG, imágenes JPG, etc.
- Gratuidad. Se ofrecen con carácter gratuito para un uso no comercial.
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 descargar los audios del Banco multimedia del INTEF-MEC o de cualquier otro repositorio con permisos de autor.
Paso 2. Conseguir el reproductor HTML5
Para conseguir el 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.
- audio.js: Sitio web oficial | audiojs.zip (v 2010)
- MediaElement: Sitio web oficial | mediaelement.zip (v 2.10.0)
- jPlayer: Sitio web oficial | jplayer.zip (v 2.2.0)
Paso 3. Configurar el reproductor
- Elige un modelo de los propuestos. Descarga y descomprime el zip correspondiente. Como resultado obtendrás una carpeta que contiene todo lo necesario para que funcione. Todos los reproductores se pueden utilizar para integrar un archivo de audio. Si se desea incorporar una lista de reproducción de audios entonces debes elegir jPlayer.
- Copia el archivo o archivos de audio MP3 que deseas publicar a la subcarpeta audios de esa carpeta que has obtenido anteriormente.
- En función del reproductor elegido:
- audio.js: edita el código HTML de la página index.html y modifica la línea 15 para cambiar el nombre del archivo MP3 que deseas publicar. Recuerda que este nuevo archivo debe encontrarse dentro de la carpeta audios. Si no lo vas a utilizar puedes eliminar el archivo de audio que se proporciona a modo de prueba.
- MediaElement: edita el código HTML de la página index.html y modifica la línea 11 para cambiar el nombre del archivo MP3 que deseas publicar. Al igual que en el anterior conviene tener en cuenta que ese archivo debe ubicarse dentro de la carpeta audios.
- jPlayer: edita el código HTML de la página demoXXXX.html con la variante de jPlayer elegida. Es necesario modificar el nombre o nombres de los archivos MP3 y el título de las pistas.
Paso 4. Subir los archivos al servidor
Es necesario subir a tu sitio web la carpeta con todos los archivos y subcarpetas necesarias para que el reproductor funcione.
Para alojar estos archivos en la red caben distintas alternativas:
- Sitio web personal. Puedes subir la carpeta del reproductor a tu espacio web personal y luego renombrarla, por ejemplo, con el identificador «audio». Copia la dirección URL de la página principal: index.html. Ejemplo: http://canaltic.com/audio/index.html
- 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. Luego haz clic en el enlace “Ver” del archivo index.html situado en la carpeta principal. Copia y pega en la dirección que se muestra en la barra de direcciones del navegador. Ejemplo: https://<codigo_alfanumerico>/site/<nombre_sitio>/audio/index.html
- 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 la página index.html 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: http://dl.dropbox.com/u/<numeros>/audio/index.html
Paso 5. Crear/pegar el código iframe
A continuación construye el código iframe en cuyo interior se mostrará la página index.html con el reproductor elegido:
<iframe src="<url_index_reproductor>" frameborder="0" width="100%" height="60px"></iframe>
El valor de los parámetros width y height se pueden ajustar en función del tipo de reproductor elegido. Para finalizar copia y pega este código en la pestaña HTML del artículo de tu blog, wiki, etc.
Ejemplo
Descarga
- audio.js: audiojs.zip (v 2010)
- MediaElement: mediaelement.zip (v 2.10.0)
- jPlayer: jplayer.zip (v 2.2.0)
Es justo la información que andaba buscando, gracias por el aporte. Un saludo.