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
autoplay
controls
loop
muted
preload
autoplay
controls
loop
muted
auto
metadata
none
Descripción
Especifica que el sonido comenzará tan pronto esté disponible.
Especifica que se muestre en pantalla la barra de control del sonido.
Especifica que el sonido debe repetirse permanentemente.
Especifica que el sonido debe ser silenciado
Especifica si el archivo de sonido debe ser cargado (y cómo) cuando
se carga la página.
Especifica el sitio (URL) donde se encuentra el archivo de sonido.
URL
src
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
Internet Explorer 9+
Chrome 6+
Firefox 3.6+
Safari 5+
Opera 10+
MP3 WAV OGG
NO
SI
SI
SI
NO
SI
NO
SI
NO
SI
NO
SI
SI
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> 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> 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>
Crear cuenta
Comentarios de: INCLUIR SONIDO EN UNA PÁGINA WEB (0)
No hay comentarios