Codex - Html / Audio
< Media | Índice | Object >
Sons podem ser tocados em HTML por diferentes métodos.
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.
<a href="song.mp3">Tocar o som</a>
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
<source src="som.mp3" type="audio/mpeg" />
<source src="som.ogg" type="audio/ogg" />
<embed height="50px" width="100px" src="som.mp3" />
A tag <embed> é usada para embutir elementos multimedia em páginas HTML.
E exemplo abaixo demonstra uma mp3 embutida em uma página web.
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.
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.
Seu browser não toca este tipo de formato de 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.
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.
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.
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.
<a href="song.mp3">Play Song</a>
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:
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.
<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.
<a href="song.mp3">Play the song</a>
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.