Como Adicionar Música de Fundo em HTML (Tag <audio> HTML5)

Vários métodos de incorporar música numa página Web tornaram-se populares desde os primórdios da Web. Notavelmente, a tag "embed" em HTML, players de áudio baseados em Java e players baseados em Flash são opções possíveis, mas nenhuma solução foi universalmente adotada ou é totalmente compatível com todos os navegadores e plataformas. O padrão HTML5 mais recente inclui a tag <audio>, especificamente definida para reprodução de áudio incorporado.

Passo 1: Incorporar Ficheiro de Áudio Básico

Adicione o seguinte código em qualquer parte do corpo do seu documento HTML para incorporar um ficheiro de música e reproduzi-lo automaticamente quando um visitante aceder ao site:

<audio src="caminho/para/ficheiro.mp3" autoplay></audio>

Altere o atributo "src" para conter o caminho e nome do ficheiro de música que pretende incorporar.

Passo 2: Repetição (Loop)

Adicione o atributo "loop" se quiser que o ficheiro de música toque repetidamente:

<audio src="caminho/para/ficheiro.mp3" autoplay loop></audio>

Passo 3: Múltiplos Formatos (Compatibilidade)

Use várias tags <source> em vez do atributo "src" da tag <audio> se quiser oferecer ao navegador do utilizador uma escolha de múltiplos formatos de ficheiro:

<audio autoplay loop>
  <source src="musica/ficheiro.mp3" type="audio/mpeg">
  <source src="musica/ficheiro.ogg" type="audio/ogg">
</audio>

Neste exemplo, o navegador decide se reproduz o ficheiro MP3 ou OGG. Esta técnica é útil para atingir dispositivos móveis que só reproduzem certos formatos de áudio.

Passo 4: Fallback para Navegadores Antigos

Aninhe a tag <embed> dentro da tag <audio> para fornecer suporte a navegadores mais antigos sem suporte HTML5. Note que este uso da tag <embed> é depreciado (já não é oficialmente requerido), pelo que só deve experimentar se suspeitar que os seus utilizadores usam navegadores desatualizados. Exemplo:

<audio autoplay loop>
  <source src="musica/ficheiro.mp3" type="audio/mpeg">
  <embed src="musica/ficheiro.mp3" autostart="true" loop hidden>
</audio>

Dica

Considere adicionar o atributo "controls" à tag <audio> para permitir ao utilizador parar a música e alterar o volume. Além disso, evite usar o atributo "autoplay" a menos que haja uma boa razão. Muitos utilizadores acham música de fundo que toca inesperadamente sem permissão irritante e abandonarão o site imediatamente.

• Como Alterar o Tamanho dos Marcadores (Bullets) no Adobe InDesign
• Como Converter Maiúsculas em Minúsculas no Word, Excel, Outlook e Online