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 de hacer es crear las múltiples fuentes que necesita para asegurarse de que sus archivos de sonido se reproducen en la más amplia variedad de navegadores.

La ventaja de usar HTML5 es que puedes incrustar sonido con sólo usar un par de etiquetas. Los navegadores, entonces, reproducen el sonido de la misma manera que mostrarían una imagen cuando usted usa un

 IMG 

elemento.

Cómo añadir 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 un 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. Convierta su archivo a formato Vorbis (

    .ogg 

   ) para agregarlo en soporte para Firefox 3.6+ y Opera 10.5+. Puede utilizar un convertidor como el que se encuentra en Vorbis.com. También puedes convertir tu MP3 a un formato de archivo WAV (

    .wav 

   ) para obtener soporte para Firefox y Opera. Le recomiendo que publique su archivo en los tres tipos, sólo por seguridad, pero lo más que necesita es MP3 y otro tipo.

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

    imágenes 

   .

4. Añada el elemento

    AUDIO 

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

5. Coloque

    SOURCE 

   elementos para cada archivo de audio que cargue dentro del elemento

    AUDIO 

   :

1. < >.
   1. Cualquier HTML dentro del elemento

       AUDIO 

      se utilizará como elemento de reserva para los navegadores que no soporten el elemento

       AUDIO 

      . Así que agrega algo de HTML. La forma más fácil es añadir HTML para que puedan descargar el archivo, pero también puede utilizar métodos de incrustación HTML 4.01 para reproducir el sonido. Aquí hay una simple alternativa:

   3. .
      5.   MP3, 

      6.   Vorbis, 

      7.   WAV/audio>  

   Consejos adicionales

   • Asegúrese de usar el tipo de documento 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 hemos configurado el HTML para que incluya controles de forma predeterminada y que la reproducción automática esté desactivada. Puede, por supuesto, cambiar eso, pero recuerde que muchas personas encuentran que el sonido se inicia automáticamente/que no pueden controlar para ser molestos en el mejor de los casos, y a menudo simplemente abandonan la página cuando eso sucede.