Como adicionar som a uma página da Web HTML5

O HTML5 facilita a adição de som e música às suas páginas da Web com o elemento. Na verdade, o mais difícil é criar as várias fontes necessárias para garantir que seus arquivos de som sejam reproduzidos na maior variedade de navegadores.

A vantagem de usar o HTML5 é que você pode incorporar o som usando apenas algumas tags. Os navegadores, então, tocam o som exatamente como exibem uma imagem quando você usa um

IMG elemento.

Como adicionar som a uma página da Web HTML5

Você precisará de um editor de HTML, um arquivo de som (preferencialmente no formato MP3) e um conversor de arquivos de som.

1. Primeiro, você precisa de um arquivo de som. É melhor gravar o arquivo como um MP3 (

   .mp3), pois tem alta qualidade de som e é compatível com a maioria dos navegadores (Android 2.3+, Chrome 6+, IE 9+, iOS 3+ e Safari 5+).

2. Converta seu arquivo para o formato Vorbis (

   .ogg) para adicionar suporte ao Firefox 3.6+ e ao Opera 10.5+. Você pode usar um conversor como o encontrado em Vorbis.com. Você também pode converter seu MP3 para um formato de arquivo WAV (

   .wav) para obter suporte do Firefox e Opera. Eu recomendo postar seu arquivo em todos os três tipos, apenas por segurança, mas o máximo que você precisa é de MP3 e outro tipo.

3. Faça o upload de todos os arquivos de áudio para o seu servidor web e anote o diretório em que você os armazenou. É uma boa idéia colocá-los em um subdiretório apenas para arquivos de áudio, como a maioria dos designers salvam imagens em um arquivo.

   imagens diretório.

4. Adicione o

   ÁUDIO elemento para o seu arquivo HTML onde você deseja que os controles de arquivo de som sejam exibidos.

5. Lugar, colocar

   FONTE elementos para cada arquivo de áudio que você carrega dentro do

   ÁUDIO elemento:

6. 1. Qualquer HTML dentro do

      ÁUDIO elemento será usado como um substituto para navegadores que não suportam o

      ÁUDIO elemento. Então adicione um pouco de HTML. A maneira mais fácil é adicionar HTML para permitir o download do arquivo, mas você também pode usar os métodos de incorporação do HTML 4.01 para reproduzir o som. Aqui está um simples recuo:

      Seu navegador não suporta reprodução de áudio, baixe o arquivo: MP3,

   2. Vorbis, WAV

7. A última coisa que você precisa fazer é fechar o seu elemento AUDIO:

   1. Quando terminar, o seu HTML deve ficar assim:

   4. Seu navegador não suporta a reprodução de áudio, baixe o arquivo:

   5. MP3,

   6. Vorbis,

   7. WAV

Dicas Adicionais

• Certifique-se de usar o doctype () HTML5 para que seu HTML valide
• Revise os atributos disponíveis para o elemento para ver quais outras opções você pode adicionar ao seu elemento.
• Observe que configuramos o HTML para incluir controles por padrão e desativar a reprodução automática. Você pode, é claro, mudar isso, mas lembre-se de que muitas pessoas encontram sons que iniciam automaticamente / que eles não podem controlar para serem irritantes na melhor das hipóteses, e geralmente deixam a página quando isso acontece.