Cómo agregar sonido a una página web HTML5

HTML5 facilita la adición de sonido y música a sus páginas web con el elemento. De hecho, lo más difícil es crear las múltiples fuentes que necesita para asegurarse de que sus archivos de sonido se reproduzcan en la mayor variedad de navegadores.

La ventaja de usar HTML5 es que puede incrustar el sonido con solo un par de etiquetas. Los navegadores, entonces, reproducen el sonido tal como mostrarían una imagen cuando usas un

IMG elemento.

Cómo agregar sonido a una página web HTML5

Necesitará un Editor HTML, un archivo de sonido (preferiblemente en formato MP3) y un convertidor de archivos de sonido.

1. Primero, necesitas un archivo de sonido. Es mejor grabar el archivo como MP3 (

   .mp3) ya que tiene una alta calidad de sonido y es compatible con la mayoría de los navegadores (Android 2.3+, Chrome 6+, IE 9+, iOS 3+ y Safari 5+).

2. Convierte tu archivo a formato Vorbis (

   .ogg) para agregar en Firefox 3.6+ y Opera 10.5+. Puede usar un convertidor como el que se encuentra en Vorbis.com. También puede convertir su MP3 a un formato de archivo WAV (

   .wav) para obtener soporte para Firefox y Opera. Recomiendo publicar su archivo en los tres tipos, solo por seguridad, pero lo más que necesita es MP3 y otro tipo.

3. Cargue todos los archivos de audio a su servidor web y tome nota del directorio en el que los guardó. Es una buena idea colocarlos en un subdirectorio solo para archivos de audio, como la mayoría de los diseñadores guardan imágenes en un

   imagenes directorio.

4. Añade el

   AUDIO Elemento a su archivo HTML donde desea que se muestren los controles de archivo de sonido.

5. Lugar

   FUENTE Elementos para cada archivo de audio que subas dentro de la

   AUDIO elemento:

6. 1. Cualquier HTML dentro de

      AUDIO El elemento se utilizará como respaldo para los navegadores que no admiten el

      AUDIO elemento. Así que añade algo de HTML. La forma más sencilla es agregar HTML para que puedan descargar el archivo, pero también puede usar los métodos de integración HTML 4.01 para reproducir el sonido. Aquí hay un simple retroceso:

      Su navegador no admite la reproducción de audio, descargue el archivo: MP3,

   2. Vorbis, WAV

7. Lo último que debes hacer es cerrar tu elemento AUDIO:

   1. Cuando hayas terminado, tu HTML debería verse así:

   4. Su navegador no admite la reproducción de audio, descargue el archivo:

   5. MP3

   6. Vorbis,

   7. WAV

Consejos adicionales

• Asegúrese de usar el doctype () de HTML5 para que su HTML se valide
• Revise los atributos disponibles para el elemento para ver qué otras opciones puede agregar a su elemento.
• Tenga en cuenta que configuramos el HTML para incluir controles de forma predeterminada y que la reproducción automática está desactivada. Por supuesto, puede cambiar eso, pero recuerde que muchas personas encuentran un sonido que se inicia automáticamente / que no pueden controlar que sea molesto en el mejor de los casos, y que a menudo simplemente abandonan la página cuando eso sucede.