Audio HTML

Hay muchos métodos para reproducir sonido en HTML.

Problemas, problemas y soluciones

¡No es fácil reproducir audio en HTML!

Necesita familiarizarse con una gran cantidad de habilidades para asegurar que sus archivos de audio se puedan reproducir en todos los navegadores (Internet Explorer, Chrome, Firefox, Safari, Opera) y en todo tipo de hardware (PC, Mac, iPad, iPhone).

En este capítulo, CodeW3C.com le resume problemas y soluciones.

Utilice complementos

Un complemento de navegador es un pequeño programa de computadora que extiende las funciones estándar del navegador.

Los complementos tienen muchos usos: reproducir música, mostrar mapas, verificar cuentas bancarias, controlar entradas, etc.

Se puede usar la etiqueta <object> o <embed> para agregar complementos a una página HTML.

Estas etiquetas definen contenedores para recursos (generalmente recursos no HTML), que, dependiendo del tipo, se mostrarán por el navegador o por complementos externos.

Utilice el elemento <embed>

La etiqueta <embed> define un contenedor para contenido externo (no HTML) (es una etiqueta HTML5, ilegal en HTML4, pero válida en todos los navegadores).

El siguiente fragmento de código puede mostrar el archivo MP3 incrustado en la página web:

Ejemplo

<embed height="100" width="100" src="song.mp3" />

Pruebe usted mismo

Pregunta:

  • La etiqueta <embed> es inválida en HTML 4. La página no puede ser validada con HTML 4.
  • Los navegadores admiten formatos de audio diferentes.
  • Si el navegador no admite el formato de archivo y no hay complemento, no se puede reproducir este audio.
  • Si el usuario no tiene instalado el complemento, no se puede reproducir el audio.
  • Si se convierte el archivo a otro formato, aún no se puede reproducir en todos los navegadores.

Nota:Use <!DOCTYPE html> (HTML5) para resolver problemas de validación.

Utilice el elemento <object>

La etiqueta <object tag> también puede definir un contenedor para contenido externo (no HTML).

El siguiente fragmento de código puede mostrar el archivo MP3 incrustado en la página web:

Ejemplo

<object height="100" width="100" data="song.mp3"></object>

Pruebe usted mismo

Pregunta:

  • Los navegadores admiten formatos de audio diferentes.
  • Si el navegador no admite el formato de archivo y no hay complemento, no se puede reproducir este audio.
  • Si el usuario no tiene instalado el complemento, no se puede reproducir el audio.
  • Si se convierte el archivo a otro formato, aún no se puede reproducir en todos los navegadores.

Utilice el elemento <audio> HTML5

El elemento <audio> es un elemento HTML5, ilegal en HTML 4, pero válido en todos los navegadores.

Ejemplo

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Su navegador no admite este formato de audio.
</audio>

Pruebe usted mismo

El ejemplo anterior utiliza un archivo mp3, por lo que es válido en Internet Explorer, Chrome y Safari.

Para que este audio funcione también en Firefox y Opera, se agregó un archivo de tipo ogg. Si falla, se mostrará un mensaje de error.

Pregunta:

  • La etiqueta <audio> es inválida en HTML 4. Su página no puede ser validada con HTML 4.
  • Debe convertir el archivo de audio a un formato diferente.
  • El elemento <audio> no funciona en navegadores antiguos.

Nota:Use <!DOCTYPE html> (HTML5) para resolver problemas de validación.

La mejor solución HTML

Ejemplo

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

Pruebe usted mismo

El ejemplo anterior utiliza dos formatos de audio diferentes. El elemento <audio> de HTML5 intentará reproducir el audio en mp3 o ogg. Si falla, el código intentará usar el elemento <embed>.

Pregunta:

  • Debe convertir el audio a un formato diferente.
  • El elemento <audio> no puede validarse con HTML 4 y XHTML.
  • El elemento <embed> no puede validarse con HTML 4 y XHTML.
  • El elemento <embed> no puede deshacerse para mostrar mensajes de error.

Nota:Use <!DOCTYPE html> (HTML5) para resolver problemas de validación.

La forma más sencilla de agregar audio a un sitio web

¿Cuál es la forma más sencilla de agregar audio a una página web?

El reproductor de medios de Yahoo es absolutamente uno de ellos.

El uso del reproductor de medios de Yahoo es una manera diferente. Simplemente deje que Yahoo se encargue de la reproducción de canciones.

Puede reproducir archivos mp3 y una serie de otros formatos. Con una línea de código simple, puede agregarlo a su página web y transformar fácilmente una página HTML en una lista de reproducción profesional.

Reproductor de medios de Yahoo

Ejemplo

<a href="song.mp3">Reproducir Sonido</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>

Pruebe usted mismo

El uso del reproductor de Yahoo es gratuito. Para usarlo, debe insertar este código JavaScript en la parte inferior de la página web:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

Luego simplemente enlace el archivo MP3 a su HTML, y JavaScript creará automáticamente un botón de reproducción para cada canción:

<a href="song1.mp3">Reproducir Canción 1</a>
<a href="song2.mp3">Reproducir Canción 2</a>
...
...
...

El reproductor de medios de Yahoo ofrece a sus usuarios un pequeño botón de reproducción, en lugar de un reproductor completo. Sin embargo, al hacer clic en el botón, se abre el reproductor completo.

Tenga en cuenta que este reproductor siempre se ancla en la parte inferior de la ventana. Simplemente haga clic en él para deslizarlo hacia afuera.

Uso de enlaces

Si la página web contiene enlaces a archivos de medios, la mayoría de los navegadores usarán una "aplicación auxiliar" para reproducir el archivo.

El siguiente fragmento de código muestra un enlace a un archivo mp3. Si el usuario hace clic en el enlace, el navegador iniciará una "aplicación auxiliar" para reproducir el archivo:

Ejemplo

<a href="song.mp3">Reproducir el sonido</a>

Pruebe usted mismo

Sonido en línea

Cuando incluye sonido en una página web o como parte de una página web, se llama sonido en línea.

Si planea usar sonidos en línea en aplicaciones web, debe ser consciente de que a muchas personas les resulta irritante. Además, tenga en cuenta que los usuarios pueden haber desactivado la opción de sonido en línea en el navegador.

Nuestra mejor recomendación es incluirlos solo en lugares donde el usuario desee escuchar sonido en línea. Un ejemplo positivo es, cuando el usuario necesita escuchar una grabación y hacer clic en un enlace, se abre la página y se reproduce la grabación.

Etiquetas multimedia de HTML 4.01

Etiqueta Descripción
<applet> No recomendado. Define el applet incrustado.
<embed> No recomendado en HTML4, permitido en HTML5. Define el objeto incrustado.
<object> Define el objeto incrustado.
<param> Define los parámetros del objeto.

Etiquetas multimedia de HTML 5

Etiqueta Descripción
<audio> La etiqueta define sonidos, como música u otros flujos de audio.
<embed> Las etiquetas definen el contenido incrustado, como complementos.