Codex

< 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:


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:


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:

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:

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:

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:

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:

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.


Usando o Google

Exemplo:


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:


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 >