Etiqueta <AUDIO>
La etiqueta <audio>, es una de las nuevas etiquetas del lenguaje HTML5, que permite reproducir un archivo de audio.
Actualmente se pueden reproducir tres tipos de formato de audio, mp3, wav y ogg. Aunque también depende del navegador que se permita su reproducción.
La siguiente lista muestra los formatos y su reproducción en los diferentes navegadores.
| Navegador | MP3 | Wav | Ogg |
| Internet Explorer | SI | NO | NO |
| Chrome | SI | SI | SI |
| Firefox | SI | SI | SI |
| Safari | SI | SI | NO |
| Opera | NO | SI | SI |
La sintaxis de la etiqueta es la siguiente.
<audio autoplay controls loop muted preload=”valor” src=”valor”>
Texto para navegadores que no soportan audio…
</audio>Entre los atributos de la etiqueta encontramos los siguientes.
src
El atributo permite especificar la dirección URL del recurso al cual se quiere acceder, siendo en este caso el archivo que contiene el audio a cargar en el documento web.
Se ha de especificar el archivo de audio con el formato adecuado para el navegador donde se vaya a reproducir el audio.
Como esta opción no es predecible por el desarrollador y depende del usuario final. Se recomienda utilizar la etiqueta <source>, dentro de la etiqueta de audio, para especificar diferentes formatos, de forma que el navegador utilizado cargue la primera que sea capaz de reconocer.
autoplay
El atributo permite especificar que el archivo de audio sea reproducido automáticamente, al ser el archivo cargado por el navegador.
Es un atributo booleano, por tanto para que se ejecute el audio simplemente se ha de especificar el atributo en la etiqueta.
controls
El atributo es booleano, por lo que, al ser especificado en la etiqueta, permite que se visualicen los controles de control de audio, entre los que se encuentran, el botón de reproducción, pausa, búsqueda y volumen.
loop
Si se especifica el atributo, el archivo de audio es reproducido automáticamente en modo bucle, cuando finalice el audio volverá a empezar de nuevo.
muted
Al especificar el atributo, el archivo de audio será cargado, pero se activará la opción de silenciar el audio.
preload
El atributo tiene tres valores posibles valores: none, auto y metadata. El atributo permite definir si se realiza una precarga inicial del archivo de audio.
Si se especifica el valor none, no se realiza ningún tipo de precarga y se espera que el usuario sea el que active el audio pulsando sobre el control correspondiente.
Si se indica el valor auto, se realiza la precarga completa del archivo de audio, para que la reproducción sea más homogénea y no se produzcan paros o saltos en la misma. Se ha de utilizar si no se compromete la velocidad de descarga entre el cliente y servidor.
Por último si se especifica el valor metadata, se realiza como precarga solo la información concerniente al archivo de audio, como duración, dimensión, etc.
Se ha de tener en cuenta que, para realizar una carga correcta del formato de audio, se habría de utilizar la etiqueta <source>, la cual permite realizar la carga del archivo de audio en varios formatos.
Esta última etiqueta dispone a su vez de dos atributos los cuales se habrían de especificar, cuando se utilice la misma.
Estos atributos son src, el cual permite especificar la ruta, bien absoluta o relativa al archivo de audio. Y otro atributo denominado type, el cual se utiliza para indicar el tipo MIME del archivo que se quiere reproducir. Entre los posibles tipos a utilizar por este último atributo se encuentran los siguientes:
| Valor MIME | Audio/Video |
| video/ogg | Video |
| video/mp4 | Video |
| video/webm | Video |
| audio/ogg | Audio (*.ogg) |
| audio/mpeg | Audio (*.mp3) |
El siguiente ejercicio muestra el uso de la etiqueta en un documento web.
<!DOCTYPE HTML>
<html>
<head>
<title>Ejercicios prácticos HTML5</title>
<meta charset="utf-8">
<meta name="description" content="Ejercicios prácticos HTML5">
<meta name="generator" content="www.aprendoencasa.com, Curso práctico HTML5">
<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5">
</head>
<body>
<audio controls>
<source src="Hoy.mp3" type="audio/mpeg">
<source src="Hoy.ogg" type="audio/ogg">
El Navegador NO SOPORTA AUDIO.
</audio>
</body>
</html>El resultado del ejercicio anterior ha de ser similar al que se muestra a continuación en la imagen.
Curso práctico HTML5, etiqueta AUDIO
Gracias por vuestra visita y un saludo!!!
Busca tu articulo
Utiliza este buscador para encontrar el articulo que te interesa, si no existe la practica o ejercicio, deja un comentario proponiendo que realicemos un articulo sobre el, gracias por vuestra visita y un saludo!!
