Como engadir son a unha páxina web HTML5

HTML5 fai que sexa fácil engadir o son e a música ás túas páxinas web co elemento. De feito, o máis difícil de facer é crear as múltiples fontes que precisas para asegurarte de que os teus ficheiros de son xoguen na maior variedade de navegadores.

O beneficio de usar HTML5 é que pode inserir só co uso dun par de etiquetas. Os navegadores, entón, reproducen o son como mostrarían unha imaxe cando usa un elemento IMG .

Como engadir son a unha páxina web HTML5

Necesitarás un editor HTML , un ficheiro de son (preferentemente en formato MP3) e un conversor de ficheiros de son.

1. Primeiro, necesitas un ficheiro de son. É mellor gravar o ficheiro como un MP3 ( .mp3 ) porque ten unha alta calidade de son e é compatible coa maioría dos navegadores (Android 2.3+, Chrome 6+, IE 9+, iOS 3+ e Safari 5+).
2. Converte o seu ficheiro no formato Vorbis ( .ogg ) para engadir no Firefox 3.6+ e no soporte Opera 10.5+. Podes usar un conversor como o atopado en Vorbis.com. Tamén pode converter o seu MP3 a un formato de ficheiro WAV ( .wav ) para obter o soporte de Firefox e Opera. Recomendo publicar o ficheiro nos tres tipos, só para a seguridade, pero o que máis precisas é MP3 e outro tipo.
3. Cargue todos os ficheiros de audio no seu servidor web e faga nota do directorio no que almacenou. É unha boa idea colocar-los nun subdirectorio só para ficheiros de audio, como a maioría dos deseñadores gardan imaxes nun directorio de imaxes .
4. Engada o elemento AUDIO ao seu ficheiro HTML onde desexa que se mostren os controis de ficheiro de son.
5. Coloque os elementos SOURCE para cada ficheiro de audio que cargue dentro do elemento AUDIO :

1. Calquera HTML dentro do elemento AUDIO úsase como un reto para navegadores que non soportan o elemento AUDIO . Así que engade un pouco de HTML. O xeito máis sinxelo é engadir HTML para que poidan descargar o ficheiro, pero tamén pode usar métodos HTML 4.01 para reproducir o son. Aquí tes un fallo simple:

   O teu navegador non admite a reprodución de audio, descarga o ficheiro:

   1. MP3 ,
   2. Vorbis , WAV
2. O último que tes que facer é pechar o elemento AUDIO :
3. Cando remate, o seu HTML debería ser así:
   4. O teu navegador non admite a reprodución de audio, descarga o ficheiro:

   5. MP3 ,
   6. Vorbis ,
   7. WAV

Consellos adicionais

1. Asegúrese de usar a doctype HTML5 () para que o seu HTML validase
2. Revisa os atributos dispoñibles para ver o que outras opcións podes engadir ao teu elemento.
3. Teña en conta que configuramos o HTML para incluír os controles de xeito predeterminado e que a reprodución automática estea desactivada. Pode, por suposto, cambiar isto, pero recorda que moita xente atopa un son que comeza automáticamente / que non pode controlar para ser molesto no mellor dos casos, e moitas veces só deixará a páxina cando isto ocorre.