Incluir áudios na web.

Uma vez escolhidos nossos arquivos de áudio, é hora de incluí-los em nossa página web. Logicamente, para que um arquivo de áudio possa ser reproduzido por um navegador é necessário que sua máquina tenha incluído um cartão de áudio e um par de alto-falantes.

Existem diversas formas de incluir um arquivo de áudio em uma página, formas que dependem do tipo de arquivo e do navegador usado, e podemos usar diferentes etiquetas para cada una delas.

BGSOUND

A etiqueta bgsound incorpora áudios de fundo em uma página web, áudios que se executam automaticamente ao carregar página. É uma etiqueta proprietária de Microsoft, por isso só é interpretada por Internet Explorer, admitindo os formatos de áudio MID e WAV, embora geralmente também aceita AU e MP3, em versões atuais do navegador ou mediante plugins de uso geral.

Sua sintaxe geral, com seus atributos mais importantes, é do tipo:

<bgsound src="rota_arquivo" loop="l" balance="b" volume="v"></bgsound>

Onde:

• src="rota_arquivo" fixa a rota na qual se encontra o arquivo de áudio a reproduzir. A rota pode ser relativa ao nosso sistema de pastas local, absoluta com respeito ao sistema de pastas do servidor web ou uma URL completa que localize o arquivo em Internet.



• loop="l" determina o número de vexes (l) que se deve executar o arquivo de áudio. Se dermos o valor infinite, o arquivo se reproduzirá indefinidamente.



• balance="b" determina o equilíbrio de áudio entre dois alto-falantes da máquina, ou seja, a potência ou intensidade com que se escutará em cada um deles (direito e esquerdo). Seus valores podem estar entre -10,000 e +10,000, correspondendo o valor 0 a um balance equilibrado entre os dois alto-falantes.



• volume="v" fixa o volume ao que se ouvirá o áudio, e seus valores podem variar entre -10,000 (mínimo) e 0 (máximo). Não é suportado pelas máquinas MAC.

Exemplo:

<bgsound src="../audios/wav.wav" balance=0 volume=0></bgsound>

Pode-se ver funcionando nesta janela (só Internet Explorer).

A etiqueta bgsound admite muitas mais propriedades (disabled, delay, id, class, controls, etc.). Ainda assim, esta etiqueta é acessível em Internet Explorer mediante código JavaScript, podendo modificar em tempo real suas propriedades balance, loop, src, e volume, embora esta última só seja acessível em plataformas PC. Para uma informação completa sobre todas as propriedades e funcionalidades desta etiqueta pode-se visitar a página correspondente de Microsoft:

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/bgsound.asp

EMBED

Nestcape Navigator implementou a etiqueta embed para incorporar arquivos de áudio. Easta é uma etiqueta de caráter geral, que se usa para a inclusão nas páginas web de todos aqueles arquivos alehios ao navegador e que necessitam portanto a execução de algum plugin para sua interpretação.

Paradoxalmente, Internet Explorer assumiu depois o uso desta etiqueta para a inclusão de arquivos de áudio, para chegar a interpretá-la melhor e ampliá-la com mais atributos e propriedades, de tal forma que a execução de áudio com embed é atualmente mais cômoda com este navegador, ao incorporar a suíte de Microsoft seus próprios plugins para a interpretação dos diferentes formatos de áudio. Em troca, se usamos Netscape Navigator nos encontraremos em muitos casos com uma falha na reprodução ou com uma molesta mensagem de necessidade de algum plugin especial (sobretudo nas versões 6x), o que nos obrigará a visitar a página de Netscape para seu download e instalação, que muitas vezes não será efetiva.

Seja como for, há que indicar que esta etiqueta nos incluirá na página web um objeto especial, uma espécie de console de comando, denominada Crescendo, que consta de três botões, similares ao de qualquer reprodutor de áudio: um botão Play, para começar a reprodução (se não estiver estabelecido o automático), um botão Pause, para deter momentaneamente e um botão Stop, para deter definitivamente (posto a zero). Este console é diferente segundo o navegador usado; no caso de Internet Explorer se mostra o típico console de Windows Media, cujo tamanho podemos configurar, enquanto que em Netscape se mostra um console próprio, de tamanho fixo definido.

A sintaxe geral da etiqueta embed é do tipo:

<embed atributo1="valor1" atributo2="valor2"...atributoN="valorN"></embed>

E no caso que nos ocupe, da inclusão de arquivos de áudio, os atributos podemos dividi-los em dois tipos:

1. Atributos referentes ao áudio:

• src="rota_arquivo", que fixa a rota na qual se encontra o arquivo de áudio a reproduzir. A rota pode ser relativa ao nosso sistema de pastas local, absoluta respeito ao sistema de pastas do servidor web ou uma URL completa que localize o arquivo em Internet.



• loop="l/true/false", que determina o número de vezes que se deve executar o arquivo de áudio. Os valores admitidos são l (número inteiro de vezes), true (infinitas vezes) e false (só uma vez). Só é reconhecida por Netscape Navigator.



• playcount="n", que define o número de vezes (n) que se deve executar em arquivo de áudio no caso de Internet Explorer.



• type="tipo_arquivo", atributo importante, que declara o tipo de arquivo de áudio que estamos usando, com o qual o navegador web pode executar o programa ou plugin adequado para a reprodução do arquivo. Pode ser audio/midi, audio/wav, etc.



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



• pluginspage="URL", que estabelece, no caso de ser necessário um plugin especial para reproduzir o arquivo, a página web onde se pode baixar o mesmo. Só se ativa no caso de que o navegador não seja capaz de reproduzir o arquivo por si mesmo, e é suportada somente por Netscape Navigator.



• name="nome", que atribui um nome identificador (deve ser único na página) a uma etiqueta embed determinada, com objeto de ser acessada logo por linguagens de script.



• volume="v", que determina o volume de reprodução de áudio, e que pode variar entre 0 e 100. É suportada somente por Netscape Navigator, que no console mostra o valor estabelecido em seu indicador de volume, sendo seu valor padrão 50. No caso de Internet Explorer, o valor de volume por padrão é 50 em plataformas PC, e 75 em MAC, sendo necessário agir sobre o controle de volume do console para modificá-lo.

2. Atributos referentes ao console:

• hidden="true/false", que estabelece se o console será visível (false) ou não (true). Este é um aspecto polêmico, já que se ocultamos o console obrigamos ao usuário a ouvir nosso arquivo, sem possibilidade de deter nem de modificar o volume, e se o mostramos estaremos incrustando na tela um objeto que muitas vezes nos romperá o esquema de design de nossa página. Resta determinar seu uso em cada caso concreto.



• width="w", que determina a largura visível do console, em pixels. height="h", que determina a altura visível do console, em pixels. Estes atributos são também muito importante, no caso de que tenhamos estabelecido hidden= "false", já que de seu valor irá depender a correta visulazação do console. No caso de Internet Explorer, que mostra um logo de Windows Media sobre os controles, o tamanho mínimo aceitável deve ser de 140x100 pixels, já que senão o console sairá deformado em excesso ou recortado. E no caso de Netscape Navigator, deveremos atribuir uns valores de 145x60 pixels, que é o que ocupa o console; se colocarmos um tamanho menor, o console será recortado, perdendo funcionalidades, e se atribuímos um tamanho maior, aparecerão espaços cinzas ao redor do console, tornando o aspecto da página feio. Se não especificarmos estes atributos e tampouco hidden, aparecerá na página somente os comandos do console, sem logotipos adicionados (Internet Explorer) ou o console recortado (Netscape Navigator).



• 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.

Estes são os atributos principais, embora possamos encontrar referências de outros admitidos, apesar de não costumarem ser operacionais na realidade, já que não funcionam de forma correta ou são específicos de Nestcape (como toda a série de atributos que configuram os controles do console).

Exemplo sem console:

<embed src="../audios/mid.mid" hidden="true" type="audio/midi" autostart="true"></embed>

Que podemos ver em funcionamento nesta janela.

Exemplo com console:

<embed src="../audios/mid.mid" hidden="false" type="audio/midi" autostart="false" width="150" height="100"></embed>

Que temos visível (e audível) nesta outra janela.