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

HTML5 facilita agregar 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 más amplia variedad de navegadores.

HTML5 facilita agregar 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 más amplia variedad de navegadores.

El beneficio de usar HTML5 es que puede incrustar sonido simplemente usando 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. Convierta su archivo al formato Vorbis (

      .ogg  

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

      .wav  

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

  3. Cargue todos los archivos de audio en su servidor web y tome nota del directorio en el que los almacenó. 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

      imágenes  

    directorio.

  4. Agregue el elemento

    AUDIO 

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

     
  5. Coloque los elementos

    SOURCE 

    para cada archivo de audio que cargue dentro del elemento

    AUDIO 

    :

    1.  
  6.   
    1. Cualquier HTML dentro del elemento

      AUDIO 

      se usará como respaldo para los navegadores que no admiten el elemento

      AUDIO 

      . Entonces agregue algo de HTML. La forma más fácil es agregar HTML para que puedan descargar el archivo, pero también puede usar métodos de incrustación de HTML 4.01 para reproducir el sonido. Aquí hay una alternativa simple:

        

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

    2.    Vorbis ,  WAV   
  1.   Lo último que debe hacer es cerrar su elemento AUDIO: 
    1.   Cuando haya terminado, su HTML debería verse así:   
    2.    
    3.    
    4.   

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

    5.    MP3 ,   
    6.    Vorbis ,   
    7.    WAV   

Consejos Adicionales

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

Rate article
labsfabs.com
Add a comment