Áudio HTML

Existem muitas maneiras de reproduzir som em HTML.

Problemas, problemas e soluções

Reproduzir áudio em HTML não é fácil!

Você precisa dominar muitas técnicas para garantir que seus arquivos de áudio possam ser reproduzidos em todos os navegadores (Internet Explorer, Chrome, Firefox, Safari, Opera) e em todos os dispositivos (PC, Mac, iPad, iPhone).

Neste capítulo, CodeW3C.com oferece uma resumo de problemas e soluções.

Use plugins

O plugin do navegador é um pequeno programa de computador que expande as funcionalidades padrão do navegador.

Os plugins têm muitos usos: reprodução de música, exibição de mapas, verificação de contas bancárias, controle de entrada, etc.

Você pode usar os tags <object> ou <embed> para adicionar plugins às páginas HTML.

Esses tags definem contêineres para recursos (normalmente recursos não HTML), que são exibidos pelo navegador ou por plugins externos, dependendo do tipo.

Use o elemento <embed>

O tag <embed> define um contêiner para conteúdo externo (não HTML) (é um tag HTML5, ilegal no HTML4, mas válido em todos os navegadores).

O código a seguir pode exibir o arquivo MP3 integrado ao site:

Exemplo

<embed height="100" width="100" src="song.mp3" />

Experimente você mesmo

Pergunta:

  • O tag <embed> é inválido no HTML 4. A página não pode passar pela verificação HTML 4.
  • Os navegadores suportam formatos de áudio de maneira diferente.
  • Se o navegador não suportar o formato do arquivo e não houver plugin, o áudio não será reproduzido.
  • Se o plugin não estiver instalado no computador do usuário, o áudio não será reproduzido.
  • Se o arquivo for convertido para outro formato, ainda não será possível reproduzir em todos os navegadores.

Nota:Use <!DOCTYPE html> (HTML5) para resolver problemas de validação.

Use o elemento <object>

O tag <object> também pode definir um contêiner para conteúdo externo (não HTML).

O código a seguir pode exibir o arquivo MP3 integrado ao site:

Exemplo

<object height="100" width="100" data="song.mp3"></object>

Experimente você mesmo

Pergunta:

  • Os navegadores suportam formatos de áudio de maneira diferente.
  • Se o navegador não suportar o formato do arquivo e não houver plugin, o áudio não será reproduzido.
  • Se o plugin não estiver instalado no computador do usuário, o áudio não será reproduzido.
  • Se o arquivo for convertido para outro formato, ainda não será possível reproduzir em todos os navegadores.

Use o elemento <audio> HTML5

O elemento <audio> é um elemento HTML5, ilegal no HTML 4, mas válido em todos os navegadores.

Exemplo

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Seu navegador não suporta este formato de áudio.
</audio>

Experimente você mesmo

O exemplo acima usa um arquivo mp3, então ele é válido no Internet Explorer, Chrome e Safari.

Para que este áudio funcione no Firefox e no Opera, foi adicionado um arquivo do tipo ogg. Caso falhe, será exibida uma mensagem de erro.

Pergunta:

  • O tag <audio> é inválido no HTML 4. A sua página não pode passar pela verificação HTML 4.
  • Você deve converter o arquivo de áudio para um formato diferente.
  • O elemento <audio> não funciona em navegadores antigos.

Nota:Use <!DOCTYPE html> (HTML5) para resolver problemas de validação.

A melhor solução HTML

Exemplo

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

Experimente você mesmo

O exemplo acima usou dois formatos de áudio diferentes. O elemento <audio> do HTML5 tentará reproduzir o áudio em mp3 ou ogg. Se falhar, o código tentará usar o elemento <embed>.

Pergunta:

  • Você deve converter o áudio para um formato diferente.
  • O elemento <audio> não pode passar pela validação do HTML 4 e XHTML.
  • O elemento <embed> não pode passar pela validação do HTML 4 e XHTML.
  • O elemento <embed> não pode ser retrocedido para exibir mensagens de erro.

Nota:Use <!DOCTYPE html> (HTML5) para resolver problemas de validação.

A maneira mais simples de adicionar áudio a um site

Qual é a maneira mais simples de adicionar áudio a uma página da web?

O player de mídia do Yahoo definitivamente é um dos melhores.

Usar o Yahoo Media Player é uma maneira diferente. Você só precisa deixar o Yahoo fazer o trabalho de reprodução de músicas.

Ele pode reproduzir mp3 e uma série de outros formatos. Com uma linha simples de código, você pode adicioná-lo ao site e transformar facilmente uma página HTML em uma lista de reprodução profissional.

Yahoo Media Player

Exemplo

<a href="song.mp3">Reproduzir Som</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
</script>

Experimente você mesmo

Usar o Yahoo Player é gratuito. Para usá-lo, você precisa inserir este JavaScript no final da página da web:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

Em seguida, apenas insira o link do arquivo MP3 em seu HTML, o JavaScript criará automaticamente um botão de reprodução para cada música:

<a href="song1.mp3">Reproduzir Música 1</a>
<a href="song2.mp3">Reproduzir Música 2</a>
...
...
...

O Yahoo Media Player oferece a seus usuários um pequeno botão de reprodução, não um player completo. No entanto, ao clicar no botão, um player completo é exibido.

Observe que o player sempre se encontra na parte inferior da janela. Basta clicar nele para deslizar para fora.

Usar hiperlinks

Se a página da web contiver links para arquivos de mídia, a maioria dos navegadores usará um "aplicativo auxiliar" para reproduzir o arquivo.

O seguinte trecho de código mostra um link para um arquivo mp3. Se o usuário clicar no link, o navegador iniciará um "aplicativo auxiliar" para reproduzir o arquivo:

Exemplo

<a href="song.mp3">Tocar o som</a>

Experimente você mesmo

Sons inline

Quando você inclui sons em uma página da web ou os inclui como parte de uma página da web, eles são chamados de sons inline.

Se você planeja usar sons inline em aplicações web, você precisa estar ciente de que muitos acham que sons inline são irritantes. Além disso, observe que os usuários podem já ter desativado a opção de som inline no navegador.

A melhor recomendação é incluir sons inline apenas onde o usuário deseja ouvir.

Tags de mídia do HTML 4.01

Tag Descrição
<applet> Não recomendado. Define o applet embutido.
<embed> Não recomendado no HTML4, permitido no HTML5. Define o objeto embutido.
<object> Define o objeto embutido.
<param> Define os parâmetros do objeto.

Tags de mídia do HTML 5

Tag Descrição
<audio> A tag define sons, como música ou outros fluxos de áudio.
<embed> As tags definem o conteúdo embutido, como plug-ins.