HTML - Audio

  »   HTML  »   Tutorial HTML - Audio

Hace algún tiempo era bastante complicado insertar música o sonidos en una página web. Ahora, ese problema está resuelto, agregar sonidos es bastante simple.

html<embed height="60" type="audio/midi" width="144" src="audio.mp3" volume="60" loop="false" autostart="false" />

Es recomendable que ambos height y width sean directamente proporcionales para evitar problemas.

Para esconder el reproductor el valor del atributo hidden(que de momento es false) será reemplazado por true. Esto se hace si estás absolutamente seguro de que el usuario no deseará detener el sonido.

Controlar y manipular el reproductor

Hechemos un segundo vistazo al ejemplo anterior:
html<embed height="60" type="audio/midi" width="144" src="audio.mp3" volume="60" loop="false" autostart="false" />
  • autostart - establece si el sonido empezará automáticamente después de que la página web haya cargado. Puede tener el valor turo o false.
  • loop - establece si el sonido se reproducirá siempre. Puede tener el valor true o false.
  • volume - puede tener cualquier valor entre 1 y 100.

Puedes jugar un poco con estos atributos para memorizarlos y entenderlos mejor, y además saber que un volumen demasiado alto puede ser molesto para el usuario.

HTML 5 Audio tag

Una vez introducida, la etiqueta HTML5 audio se ha propagado rápidamente y tiene muy buen soporte en los navegadores actuales. La etiqueta audio se utiliza para añadir sonido en la página HTML. De momento la etiqueta audio, soporta 3 tipos de archivos de audio:

  • mp3 - MIME-type audio/mpeg
  • wav - MIME-type audio/wav
  • ogg - MIME-type audio/ogg
html<audio controls>
	<source src="/assets_tutorials/media/Loreena_Mckennitt_Snow_56bit.mp3" type="audio/mpeg">
	<source src="/assets_tutorials/media/Loreena_Mckennitt_Snow_56bit.ogg" type="audio/ogg">
	Your browser does not support the audio tag.
</audio>

Demo

BrowserMP3WavOgg
Internet Explorer
Chrome
Firefox
Safari
Opera

Aqui podras encontrar, un generador para el código HTML 5 audio