Editorial de la
Universidad Tecnológica Nacional
U.T.N.
 
PARA INCLUIR SONIDO EN UNA PÁGINA WEB 
El elemento <audio> en HTML5 
 
Una forma de incluir música para escuchar desde una página web es utilizar el elemento <audio>.  Hay que 
tener en cuenta que solo funciona con los browsers Internet Explorer 9+, Chrome, Safari, Firefox y Opera. 
Por este motivo conviene incluir una frase de advertencia para los usuarios que utilicen versiones de 
browser más antiguas. 
 
1.‐ El código básico a incluir en la página es el siguiente: 
 
<audio controls=""> 
<source src="tema musical.mp3" type="audio/mpeg"> 
<source src="tema musical.ogg" type="audio/ogg"> 
Solo funciona con Internet Explorer 9+, Firefox, Opera, Chrome, y Safari. 
</source></audio> 
 
Este código hace aparecer en pantalla la siguiente barra de control de sonido (con pequeñas variantes 
según el browser): 

 
Cuando el browser es antiguo, no aparece la barra de control sino la frase “Solo funciona con Internet 
Explorer 9+, Firefox, Opera, Chrome, y Safari”.  
Nota: es evidente que la web que incluye a la página (archivo html/htm) también debe incluir el archivo 
del tema musical (por ej.: tema musical.mp3)  
Nota: Ir al Anexo I para ver la interpretación de este código. 
 
2.‐ Para incluir información sobre el tema musical que se puede reproducir, basta incluir antes (o después) 
un texto informativo (lógicamente hay también soluciones más elegantes). 
Ejemplo: 
 
<p>Texto informativo sobre el tema musical (título, músicos, duración, etc.)</p> 
<audio controls=""> 
<source src="tema musical.mp3" type="audio/mpeg"> 
<source src="tema musical.ogg" type="audio/ogg"> 
Solo funciona con Internet Explorer 9+, Firefox, Opera, Chrome, y Safari. 
</source></audio> 
 
En la pantalla aparecerá lo siguiente: 
 
Texto informativo sobre el tema musical (título, músicos, duración, etc.) 

 
3.‐ Importante: Cuando se quieren incluir varios temas musicales, cada [comando de audio] debe estar 
encerrado y separado de los demás utilizando (por ejemplo) el elemento  
<div> ….</div>, o colocándolo dentro de la celda de una tabla 
 
 
Ejemplo:  
En el Anexo II se muestra el código utilizado en la página: 
http://www.edutecne.utn.edu.ar/audio/festival_django.html 
 
4.‐ Atributos del elemento <audio> 
 
Attributo  Valor  Descripción 
autoplay   autoplay  Especifica que el sonido comenzará tan pronto esté disponible. 

controls   controls  Especifica que se muestre en pantalla la barra de control del sonido. 

loop   loop  Especifica que el sonido debe repetirse permanentemente. 

muted   muted  Especifica que el sonido debe ser silenciado 

preload   auto  Especifica si el archivo de sonido debe ser cargado (y cómo) cuando 

metadata  se carga la página. 
none 

src   URL  Especifica el sitio (URL) donde se encuentra el archivo de sonido. 

 
Para mayor información, ir a: 
http://www.w3schools.com/tags/tag_audio.asp 
 

Siguen Anexos I y II 

   
Anexo I 
Interpretación del código utilizado para incorporar temas musicales. 
 
<audio controls=""> 
<source src="tema musical.mp3" type="audio/mpeg"> 
<source src="tema musical.ogg" type="audio/ogg"> 
Solo funciona con Internet Explorer 9+, Firefox, Opera, Chrome, y Safari. 
</source></audio> 
 
El elemento <audio> , atributos y elementos complementarios <source> 
 
<audio controls=””> Indica que el browser debe mostrar la barra de control para escuchar el tema musical. 
<source src="tema musical.mp3" type="audio/mpeg"> Indica la fuente de donde se tomará el audio 
correspondiente. El atributo  type  indica qué formato de audio se está utilizando (por ejemplo 
“audio/mpeg>”. 
En el código se incluyen dos formatos de audio posibles (mpeg  y  ogg). Esto se debe a que los browsers 
tienen sus preferencias; de este modo si no se reconoce el primero (mpeg) , se opta por el segundo (ogg). 
 
Browser      MP3  WAV  OGG 
Internet Explorer 9+  SI  NO  NO 
Chrome 6+    SI  SI  SI 
Firefox 3.6+    NO  SI  SI 
Safari 5+    SI  SI  NO 
Opera 10+    NO  SI  SI 
 
Nota práctica: La música en formato MP3 suele ser más pesada que en formato OGG.  Cuando solo se 
cuenta con archivos MP3, los browsers Safari y Opera no responden.  En estos casos conviene poner algún 
llamado de atención en la página para que los usuarios intenten con Internet Explorer 9+, Chrome o Safari. 
 
 
   
 
Anexo II 
Código insertado en la página    http://www.edutecne.utn.edu.ar/audio/festival_django.html 
 
<table style="background‐color: rgb(240, 247, 240); width: 80%; text‐align: left; margin‐left: auto; 
margin‐right: auto;" border="1" cellpadding="10" cellspacing="0"> 
<tbody> 
<tr> 
<td class="normal" style="text‐align: left; font‐weight: bold;"> 
<p>Daphne<span class="maschico"> ‐12‐</span> 
(Django Reinhardt) 3:14 /Mood Swing</p> 
</td> 
<td style="text‐align: left;"> <audio controls=""><source src="festival_django‐12.mp3" 
type="audio/mpeg"> 
Solo funciona con Internet Explorer 9+, Chrome, y Safari </source></audio></td> 
</tr> 
<tr style="background‐color: rgb(233, 233, 233);"> 
<td class="normalbold" style="text‐align: left;"> 
<p>&nbsp; &nbsp; &nbsp;Minor Swing<span class="maschico"> ‐18‐</span> (Django Reinhardt) 
3:21 
/Minor Swing Big Band</p> 
</td> 
<td style="text‐align: right;"><audio controls=""> 
<source src="festival_django‐18.mp3" type="audio/mpeg"> Solo funciona con Internet Explorer 
9+, Chrome, y Safari </source></audio></td> 
</tr> 
<tr> 
<td class="normal" style="text‐align: left; font‐weight: bold;"> 
<p>Sr. Swing<span class="maschico"> ‐1‐</span> 
(Ricardo 
Pellican;Dedicado a Oscar Alemán) 3:48/Loco el 22</p> 
</td> 
<td style="text‐align: left;"> <audio controls=""><source src="festival_django‐01.mp3" 
type="audio/mpeg"> 
Solo funciona con Internet Explorer 9+, Chrome, y Safari </source></audio></td> 
</tr> 
<tr style="background‐color: rgb(233, 233, 233);"> 
<td class="normalbold" style="text‐align: left;"> 
<p>&nbsp; &nbsp; &nbsp;Nieblas del Riachuelo<span class="maschico"> ‐3‐</span> 
(Cobian/Cadícamo) 4:34 
/Roque Monsalve 
Cuarteto</p> 
</td> 
<td style="text‐align: right;"><audio controls=""> 
<source src="festival_django‐03.mp3" type="audio/mpeg"> Solo funciona con Internet Explorer 
9+, Chrome, y Safari </source></audio></td> 
</tr> 
<tr>…. etc…………………………………</table>