Audio

< Media | Índice | Object >

Sons podem ser tocados em HTML por diferentes métodos.


Problemas e Soluções

Mostrar audio em html não é fácil!

Você deve usar vários truques diferentes para garantir que o audio será tocado em todos os browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) e todos os tipos de hardware (PC, Mac , iPad, iPhone).

Neste capítulo demonstraremos todos os problemas e soluções.


O jeito mais fácil de incluir audio no seu site

Um deles é usando o Yahoo Media Player, descrito em maior detalhe no final da página.

Este player do yahoo toca mp3 e uma variedade de outros formatos. Você pode incluí-lo na sua página ou blog com apenas uma linha de código e tornar sua página HTML num tocador profissional.

Exemplo:

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

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

Usando Plugins

Um plugin é um pequeno programa que aumenta a funcionalidade padrão de um browser. Os plugins podem ser usados para vários propósitos. Podem ser usados para tocar música, mostrar mapas, verificar sua identidade em um banco e muito mais.

Plugins podem ser incluidos em páginas HTML usando-se as tags <object> ou <embed>.


Tocando audio no html

Exemplo:

<audio controls="controls" height="50px" width="100px">
  <source src="som.mp3" type="audio/mpeg" />
  <source src="som.ogg" type="audio/ogg" />
<embed height="50px" width="100px" src="som.mp3" />
</audio>

Usando o elemento <embed>

A tag <embed> é usada para embutir elementos multimedia em páginas HTML.

E exemplo abaixo demonstra uma mp3 embutida em uma página web.

Exemplo:

<embed height="50px" width="100px" src="som.mp3" />

Problemas:

  • A tag <embed> não existe no 4. Sua página não será validada corretamente.
  • Se seu browser pode não tocar um tipo de arquivo.
  • Se você converter seu arquivo para outro formato, ainda assim não será tocado em TODOS os browsers.

Usando o elemnto <object>

A tag <object> serve para embutir elementos multimedia em páginas html.

O exemplo abaixo demonstra um arquivo MP3 embutido em uma página web.

Exemplo:

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

Problemas:

  • Se o arquivo não possuir suporte no browser, o mesmo não tocará.
  • Mesmo que converta para outro formato, não será suportado por todos os browsers.

Usando o elemento <audio>

O elemento <audio> faz parte do HTML 5, Não existe no HTML 4, mas funciona em brwsers mais recentes.

Exemplo:

<audio controls="controls">
  <source src="som.mp3" type="audio/mpeg" />
  <source src="som.ogg" type="audio/ogg" />
Seu browser não toca este tipo de formato de audio
</audio>

O exemplo usa um arquivo Ogg, pra que funcione no Firefox, Opera e Chrome. Para fazer o audio funcionar no Internet Explorer e Safari, um arquivo do tipo mp3 foi incluido.

Atualmente, existem 3 formatos principais para o elemento <audio>: Ogg Vorbis, MP3, e Wav.

Problemas:

VVocê deve converter seu arquivo para diferentes formatos. O tag <audio> não funciona em todos os browsers. O tag <audio> não valida em HTML 4 e XHTML.


A melhor solução

Exemplo:

<audio controls="controls" height="50px" width="100px">
  <source src="som.mp3" type="audio/mpeg" />
  <source src="som.ogg" type="audio/ogg" />
<embed height="50px" width="100px" src="som.mp3" />
</audio>

O exemplo acima usa 4 formatos diferentes de audio. O elemento <audio> do HTML5 tenta tocar o vídeo como ogg ou mp3. Caso falhe, será usada a tag <embed> para embutir o arquivo de audio. E se tudo falahar uma mensagem de erro será mostrada.

Problemas:

  • Você terá de converter seu vídeo para diferentes formatos.
  • O elemento <audio> não valida no HTML 4 e XHTML.
  • A tag <embed> não valida em HTML 4 e XHTML.

Nota: Usando o <!DOCTYPE html> do HTML 5, resolve os problemas de validação.


Usando o Yahoo Media Player

O Yahoo Media Player é uma aboradgem diferente. Você simplesmente deixa o fazer o trabalho de achar e tocar seus links para arquivos de som e vídeo.

Exemplo:

<a href="song.mp3">Play Song</a>

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

O uso do Yahoo player é gratuito. Para usá-lo você deve inserir este pedaço de código JavaScript no final de sua página:

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

Depois disso, é só clicar nos links para arquivos de audio em sua página HTML, e o código em javascript cria automaticamente um botão ao lado de cada link para tocar os arquivos:

<a href="som1.mp3">Toque o som 1</a> <a href="som2.mp3">Toque o som 2</a>

O Yahoo Media Player apresenta para seus leitores um pequeno botão indicativo da possibilidade de tocar seus arquivos que quando clicado, mostra um completo player/tocador com opções para o uso dos arquivos de sua página.

Note: O tocador se apresenta recolhido antes do uso, uma pequena aba na página mostra sua localização, apenas clique nela para que o tocador apareça.


Usando o Google

Exemplo:

<a href="som.mp3">Toque o som</a>

<embed type="application/x-shockwave-flash" wmode="transparent" src="http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=song.mp3" height="27" width="320"></embed>


Usando um Hyperlink

Se uma página possui um link para um arquivo de media, a maioria dos browsers chama um aplicativo externo para tocar o arquivo.

O código html abaixo irá mostrar um link para um arquivo em mp3. Se o usuário clicar no link, o browser irá abrir um aplicativo associado com a extensão, para tocá-lo.

Exemplo:

<a href="song.mp3">Play the song</a>

Som inline

Quando um som é incluido na página web, esta fonte de audio é chamada de inline.

Algumas vezes o som é incluido como som de fundo para a página também.

Se você planeja usar esse recurso, saiba que muitos acham o som de fundo irritante e desnecessário. Lembre-se também que muitos usuários tem a opção de som de fundo desabilitada em seus browsers.

Um bom conselho seria apenas criar som de fundo em páginas onde o usuário espera que algum som seja tocado, como quando o usuário clica em uma página onde ele espera ouvir o som de alguma música.

< Media | Índice | Object >