Cómo trabajar con archivos MP3 para incorporarlos como sonido en una página web con la etiqueta AUDIO de HTML5 y otras posibilidades para compatibilidad con diversos navegadores.
En este artículo repasaremos las diversas posibilidades de reproducir un archivo de sonido MP3 en un documento HTML 5. Para ello acudiremos, fundamentalmente, a tres estrategias:
- Utilizar las nuevas etiquetas HTML5
- Incrustar el archivo mediante etiquetas HTML, reconocidas en HTML 5
- Usar la etiqueta de referencia general de enlace "A HREF"
Utilización de la etiqueta audio
Esta etiqueta nos permite insertar y ejecutar un archivo de audio en un documento, sin necesitar de conectores externos. Simplemente hemos de pasarle la dirección del archivo multimedia de audio y, lo que será lo habitual, indicar que se muestren los correspondientes controles de ejecución. En el Listado 1 mostramos un ejemplo muy simple de todo esto.Listado 1: Audio MP3 con etiqueta audio de HTML 5.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
<title>Audio MP3</title>
</head>
<body>
<h1>Audio MP3</h1>
<audio id="sonido" src="whale_cry.mp3" controls>
</audio>
</body>
</html>
Puede que nos interese controlar más personalmente la apariencia del modo de reproducción, lo que implicará tener que basarnos en ciertos scripts y un par de elementos "button", por ejemplo, en el Listado 2, vemos cómo acudir a las funciones play() y pause(), disponibles en JavaScript para la programación de las etiquetas audio y video de HTML 5.
Listado 2: Audio MP3 con etiqueta audio de HTML 5, pero sin reproductor visible.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
<title>Audio MP3</title>
</head>
<body>
<h1>Audio MP3</h1>
<audio id="sonido" src="whale_cry.mp3">
</audio>
<button onclick="javascript:document.getElementById('sonido').play();">
Ejecutar</button>
<button onclick="javascript:document.getElementById('sonido').pause();">
Pausa</button>
</body>
</html>
Audio incrustado mediante la etiqueta embed
Con la nueva etiqueta embed, a diferencia de la anteriormente comentada, es posible ejecutar aplicaciones externas o contenidos multimedia, haciendo uso de los denominados conectores o plug-ins. Será útil en aquellos casos en los que las etiquetas disponibles en HTML 5 no sean capaces de ejecutar los archivos sin acudir a aquellos (por ejemplo, porque los formatos de archivo sean incompatibles, o porque los documentos no entren, ya de por sí, en las categorías contempladas por el lenguaje HTML 5).Listado 3: Audio MP3 incrustado con etiqueta "embed" de HTML 5.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
<title>Audio embed MP3</title>
</head>
<body>
<h1>Audio embed MP3</h1>
<embed src="whale_cry.mp3" width="200" height="100" type="audio/mpeg" />
</body>
</html>
En numerosas ocasiones no es preciso indicar el tipo MIME, dado que es detectado automáticamente, aunque eso penalizará en algo la velocidad de ejecución de las páginas web.
Audio incrustado mediante la etiqueta "object"
Con object podremos definir un elemento insertado en un documento HTML; dicho elemento puede ser virtualmente de cualquier tipo, por ejemplo un control ActiveX, un archivo multimedia de vídeo, audio o animación, un applet de Java, un documento Adobe Acrobat, Word, Excel, ...Esa versatilidad nos vale también para reproducir archivos MP3, de una manera similar a como lo hicimos con la etiqueta embed, pero con una compatibilidad con versiones anteriores del lenguaje HTML. La sintaxis puede ser tan simple como:
<object width="400" height="300" data="ejemplo.swf"></object>
Listado 4: Audio MP3 incrustado con etiqueta object de HTML 5.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
<title>Audio object MP3</title>
</head>
<body>
<h1>Audio object MP3</h1>
<object type="application/x-shockwave-flash" data="player_mp3_maxi.swf" width="200" height="20">
<param name="video" value="player_mp3_maxi.swf" />
<param name="FlashVars" value="mp3=whale_cry.mp3&showstop=1&showinfo=1&showvolume=1" />
</object>
</body>
</html>
- Algunos atributos HTML 4.01 no son soportados en HTML5.
- El atributo form es nuevo en HTML5.
- Object puede ser utilizado y enviado en formularios.
- Object no puede aparecer en la cabecera (HEAD) de un documento.
Audio referenciado mediante la etiqueta A HREF
Finalmente, proponemos otra posibilidad, crear un hiperenlace estándar al archivo multimedia MP3. Se trata, de alguna manera, de la opción menos elegante, pero de una plenamente válida y generalista.El comportamiento es muy similar a la etiqueta embed, trabaja con la carga del correspondiente control ActiveX que ejecutará el archivo multimedia asociado, en nuestro caso uno MP3. Una diferencia importante es que la carga se realizará en una nueva ventana, en la correspondiente al lugar en que hayamos programado el enlace, como sucede con todas las etiquetas A.
Listado 5: Audio MP3 como un enlace href estándar.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
<title>Audio href MP3</title>
</head>
<body>
<h1>Audio MP3</h1>
<h2><a href="whale_cry.mp3">Ejecutar</a></h2>
</body>
</html>
Conveniencia de los diversos métodos
En principio dependerá de los navegadores, como causa fundamental. Por ejemplo, hemos de tener muy presente –cómo la primordial- la etiqueta audio y soporte del formato MP3 en los diferentes navegadores, según las últimas versiones que hemos tenido la oportunidad de probar:
| Etiqueta audio | |||||||
| AUDIO | Formato | E | F | C | S | O | Type (MIME) |
| MP3 | X | X | X | type="audio/mpeg" | |||
|
Notas:
E: Microsoft Internet Explorer F: Mozilla Firefox C: Google Chrome S: Apple Safari O: Opera | |||||||
De no disponer de dicho soporte, tendremos la alternativa de trabajar con otros formatos de audio, cómo hemos comentado en nuestro artículo acerca de Añadir soporte para múltiples formatos de audio y vídeo (HTML 5).
Si el formato MP3 es la elección única, el uso de embed sería la segunda elección, juntamente con object, si deseamos asegurarnos la compatibilidad con navegadores que no sean compatibles con HTML 5.
Por último A HREF, podría parecer una mera concesión, pero además de asegurar compatibilidad con todas las versiones de HTML y con todos los navegadores, puede que lo que deseemos sea la ejecución en una ventana nueva y en tal caso, éste será el modo más sencillo.
Jaime Peña Tresancos
Escritor. Colaborador habitual de revistas de tecnología y experto en nuevas tec...