Áudio em HTML (V)

Neste capítulo veremos o potencial da etiqueta OBJECT.

Por Luciano Moreno


Publicado em: 06/7/08
Valorize este artigo:
A etiqueta OBJECT.

Com objeto de normalizar a inclusão de arquivos não nativos nos navegadores web se decidiu substituir as diferentes etiquetas que realizavam este papel (APPLET, BGSOUND, EMBED, etc.), e que não pertenciam aos padrões web, por uma etiqueta geral, que fosse capaz de incrustar no navegador todo tipo de arquivo. A etiqueta escolhida no padrão HTML 4.0 foi OBJECT, a qual se dotou de suficientes atributos e flexibilidade para poder realizar corretamente seu trabalho. Devido a isto, a proposta foi usar a etiqueta object também para incluir arquivos de áudio de todo tipo nas páginas web.

Pois bem, a aceitação e implementação que a mesma teve varia segundo a do navegador em particular, assim como em função do objeto a incrustar. Desta forma, Internet Explorer realizou sua própria implementação da etiqueta object, incluindo nela referências a filtros e componentes ActiveX específicos para os arquivos de áudio. Por seu lado, os navegadores Netscape não suportam corretamente esta etiqueta para arquivos deste tipo.

Restringindo-nos a Internet Explorer, a polêmica continua, já que em diferentes manuais encontraremos diferentes formas de incrustar áudios mediante object, umas que funcionam bem, e outras que não. Por que acontece isto? Eu creio que porque Microsoft foi usando a etiqueta object para implementar todo um grande conjunto de componentes próprios, que ademais foram se adaptando às diferentes versões de Internet Explorer.

Como regra geral, válida não só para incrustar arquivos de áudio, como também para outros tipos, a etiqueta object vai definir um objeto ou componente externo encarregado da reprodução do arquivo, que no caso de Internet Explorer costuma ser algum tipo de controle ActiveX. Mediante object se instancia o objeto, se declara sua URL e suas principais propriedades gerais, e mediante um conjunto de etiquetas especiais, PARAM, se passam os valores que necessita para seu correto funcionamento ou para sua configuração desejada.

A sintaxe geral da etiqueta object, para o caso de arquivos de áudio, é do tipo:

<object atributo1="valor1" atributo2="valor2" ... atributoN="valorN">
<param name="nome" value="valor">
<param name="nome" value="valor">
...
</object>


Os principais atributos de object, em referência a arquivos de áudio, são:
  • classid="identificador_objeto", que fixa a URL do objeto ou componente externo necessário para reproduzir o arquivo de áudio, e a implementação CLSID dos controles ActiveX necessários.


  • type="tipo_arquivo", atributo importante, que declara o tipo de arquivo de áudio que estamos usando.


  • width="w", que determina a largura visível do console, em pixels.


  • height="h", que determina a altura visível do console, em pixels.


  • align="top/bottom/center/baseline/left/right          /texttop/middle/absmiddle/absbotom", análogo ao da etiqueta IMG, define o alinhamento horizontal ou vertical do console com respeito aos elementos da página.


  • hspace="hs", que estabelece a separação horizontal, vspace="vs", que estabelece a separação vertical, em pixels, entre o console e os elementos da página que a rodeiam. Análoga aos seus equivalentes da etiqueta IMG.


  • autostart="true/false", que determina se o arquivo de áudio deve começar a se reproduzir por se só ao carregar a página ou se pelo contrário será preciso a atuação do usuário (ou de código de script) para que comece a audição.


  • standby="mensagem", que apresenta em tela uma mensagem ao usuário enquanto carrega o arquivo.


  • Quanto aos elementos, param os mais importantes são:

  • param name="FileName" value="rota_arquivo", determina a rota ou URL do arquivo de áudio a reproduzir. Não é necessário utilizar só arquivos WAV ou MID, podendo reproduzir também arquivos MP3 ou Real Audio. Explorer inclui o reprodutor do primeiro em ActiveMovie (componente de Windows Media).


  • param name="autostart" value="true/false", indica ao navegador se se deve começar a reproduzir o áudio automaticamente ao carregar a página ou se pelo contrário será preciso que o usuário clique o botão Play para isso.
Estes não são todos os atributos e parâmetros possíveis. Na verdade, quanto aos componentes Microsoft, podemos encontrar uma infinidade de configurações possíveis, que vão nos permitir fixar muitos aspectos dos mesmos. Deixo a cada um a possibilidade de aprofundar no estudo daqueles componentes e propriedades que necessite, porém sabendo que com os elementos vistos acima temos mais que suficiente para apresentar um arquivo de áudio em nossa página web.

xExemplo:

<object classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A" width="150" height="175" type="audio/midi">

<param name="FileName" value="../audios/xfiles.mid">
<param name="autostart" value="true">
</object>>


Que se pode ver funcionando nesta janela (somente em Internet Explorer).

A etiqueta A.

Se até agora vimos como podemos incluir em nossas páginas áudios de fundo ou iniciados pelo usuário mediante interação com o console Crescendo, vamos ver agora como podemos implementar áudio mediante o uso de uma das etiquetas mais polivalentes em HTML: a etiqueta A.

Efetivamente, os links são a base do hipertexto, base por sua vez da web, e dentro de seus múltiples usos podemos considerar o link a arquivos de áudios. O arquivo linkado pode ser interpretado diretamente pelo navegador (por ser de reprodução direta ou por ter instalado o plugin adequado) ou pode ser executado por um programa independente que se abra automaticamente (Winamp, Real Audio, etc.), sendo este o caso mais comum. Se o usuário não dispõe do programa ou plugin adequado, se abrirá uma janela de download do arquivo, com o qual poderá salvá-lo até dispor da aplicação necessária para sua reprodução.

A sintaxe geral neste caso será do tipo:

<a href="rota_arquivo">Mensagem</a>

Exemplo de arquivo MID:

<a href="../audios/watermark.mid">Música para você</a>

Que podemos ver em funcionamento nesta janela.

Exemplo de arquivo MP3:

<a href="../audios/mp3.mp3">Madonna</a>

Que temos nesta outra janela.





Comentários do artigo
Foram enviados 4 comentários ao artigo
3 comentários não revisados
1 comentário revisado:
tag object
Por: ahguia
22/1/09
Gostei muito do manual e aprendi bastante com ele, aliás com outros manuais também. No entanto, não consegui colocar uma música midi funcionando na web baseado nos princípios mostrados aqui. É importante pra mim que preciso mostrar algumas músicas MIDIs e já faço isso com a tag embed. Mas como percebi, serei forçado a trocar se quiser colocar minha página dentro dos padrões recomendados. Não consegui nem verificar o funcionamento no exemplo dado. Se for possível, gostaria que colocassem outro exemplo de uma música, de preferência midi, com o respectivo código utilizado. Assim eu acredito que ficaria mais fácil copiar o modelo. Agradeço, antecipadamente. Aécio.

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato