Áudio HTML

Existem muitos métodos para reproduzir som em HTML.

Problemas, problemas e soluções

Não é fácil reproduzir áudio em HTML!

Você precisa familiarizar-se com 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 hardware (PC, Mac, iPad, iPhone).

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

Use plug-ins

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

Os plug-ins 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 plug-ins à página HTML.

Esses tags definem contêineres para recursos (normalmente recursos não HTML), que são exibidos pelo navegador ou por plug-ins 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 funcional em todos os navegadores).

O código snippet 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 validação HTML 4.
  • Os navegadores suportam formatos de áudio de diferentes maneiras.
  • Se o navegador não suportar o formato do arquivo e não houver plugin, o áudio não pode ser reproduzido.
  • Se o plugin não estiver instalado no computador do usuário, o áudio não pode ser reproduzido.
  • Se o arquivo for convertido para outro formato, ainda não será possível reproduzir em todos os navegadores.

Notas: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 snippet 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 diferentes maneiras.
  • Se o navegador não suportar o formato do arquivo e não houver plugin, o áudio não pode ser reproduzido.
  • Se o plugin não estiver instalado no computador do usuário, o áudio não pode 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 funcional 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. Se falhar, será exibida uma mensagem de erro.

Pergunta:

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

Notas: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á o elemento <embed>.

Pergunta:

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

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

Qual é 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 reprodutor de mídia do Yahoo é absolutamente um dos melhores.

O uso do reprodutor de mídia Yahoo é uma abordagem diferente. Basta deixar o Yahoo fazer o trabalho de reprodução da música.

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.

Reprodutor de mídia Yahoo

Exemplo

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

Experimente você mesmo

O uso do reprodutor de mídia Yahoo é gratuito. Para usá-lo, você precisa inserir este código JavaScript no final da página da web:

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

Então, basta simplesmente anexar o link do arquivo MP3 ao seu HTML, e 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 reprodutor de mídia Yahoo oferece a seus usuários um pequeno botão de reprodução, não um reprodutor completo. No entanto, ao clicar no botão, um reprodutor completo será exibido.

Observe que o player sempre se ancorará na parte inferior da janela. Basta clicar nele para movê-lo para fora.

Usar hiperlinks

Se a página da web contiver hiperlinks para arquivos de mídia, a maioria dos navegadores usará "aplicativos auxiliares" para tocar os arquivos.

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

Exemplo

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

Experimente você mesmo

Sons em linha

Quando você inclui sons em uma página da web ou como parte dela, isso é chamado de som em linha.

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

Nossas melhores sugestões são incluir essas etiquetas apenas onde o usuário deseja ouvir sons em linha. Um exemplo positivo é, quando o usuário precisa ouvir uma gravação e clicar em um link, a página é aberta e a gravação é tocada.

Etiquetas de mídia HTML 4.01

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

Etiquetas de mídia HTML 5

Etiqueta Descrição
<audio> A etiqueta define sons, como música ou outros fluxos de áudio.
<embed> As etiquetas definem o conteúdo anexado, como plug-ins.