Audio HTML

Hay muchas formas de reproducir sonido en HTML.

Problemas, problemas y soluciones

¡No es fácil reproducir audio en HTML!

Necesita dominar muchas habilidades para asegurarse de que sus archivos de audio se puedan reproducir en todos los navegadores (Internet Explorer, Chrome, Firefox, Safari, Opera) y en todos los dispositivos 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 muchas aplicaciones: reproducción de música, visualización de mapas, verificación de cuentas bancarias, control de entrada, etc.

Puede usar las etiquetas <object> o <embed> para agregar complementos a la página HTML.

Estas etiquetas definen contenedores para recursos (generalmente recursos no HTML), que según el 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 diferentes formatos de audio.
  • Si el navegador no admite el formato de archivo, no se puede reproducir el audio sin complemento.
  • Si el usuario no tiene instalado el complemento, no se puede reproducir el audio.
  • Si el archivo se convierte a otro formato, aún no se puede reproducir en todos los navegadores.

Nota:Usa <!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 diferentes formatos de audio.
  • Si el navegador no admite el formato de archivo, no se puede reproducir el audio sin complemento.
  • Si el usuario no tiene instalado el complemento, no se puede reproducir el audio.
  • Si el archivo se convierte 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 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:Usa <!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á volver a intentar con el elemento <embed>.

Pregunta:

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

Nota:Usa <!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 deja que Yahoo se encargue de la reproducción de canciones.

Puede reproducir mp3 y una serie de otros formatos. Con una línea de código simple, puedes agregarlo a tu 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>
</script>

Pruebe usted mismo

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

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

Luego simplemente enlaza el archivo MP3 a tu 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, no 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 un "aplicativo 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á un "aplicativo auxiliar" para reproducir el archivo:

Ejemplo

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

Pruebe usted mismo

Sonido incrustado

Cuando incluye sonidos en una página web o como parte de la página web, se llama sonido incrustado.

Si planea usar sonidos incrustados 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 incrustado en el navegador.

Nuestra mejor sugerencia es incluirlos solo en lugares donde el usuario desee escuchar sonidos incrustados. Un ejemplo positivo es cuando el usuario necesita escuchar una grabación y hacer clic en un enlace, la página se abre 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.