Arquivos de áudio podem ser incorporados em HTML5 de maneira semelhante a vídeos. HTML5 disponibiliza um elemento próprio para isso usando audio.
<audio src="musica.mp3"> Seu navegador não suporta o elemento de áudio. </audio>
Ao elemento audio é atribuído o nome do arquivo a ser reproduzido através do atributo src. No entanto, o arquivo não é reproduzido apenas com isso. Para isso, são necessários controles.
Se deseja exibir controles, atribua ao elemento audio o atributo controls.
<audio src="musica.mp3" controls> Seu navegador não suporta o elemento de áudio. </audio>
No navegador, deve se parecer assim:
Se faltar controls, o elemento incorporado através de audio não será exibido. É útil omitir o atributo, se próprio controle de reprodução em JavaScript for inserido.
O uso do elemento audio não é sem problemas. Novamente, os navegadores são os responsáveis por suportarem diferentes formatos. A tabela a seguir fornece o status atual sobre isso.
| Navegador | MP3 | OGG | WAV | AU/SND | AIF |
Firefox | não | sim | sim | não | não |
Safari | sim | não | sim | sim | sim |
Chrome | sim | sim | não | não | não |
Opera | não | sim | sim | sim | não |
O que fazer então? O elemento audio também permite definir elementos source adicionais. Estes elementos são então atribuídos aos diferentes formatos para cada navegador. Um exemplo:
<audio controls>
<source src="musica.mp3">
<source src="musica.ogg">
</audio>
Aos atributos src são atribuídos os arquivos respectivos em diferentes formatos para os navegadores.
Além de controls, o elemento audio possui outros atributos. Um deles é autoplay.
<audio controls autoplay>
<source src="musica.mp3">
<source src="musica.ogg">
</audio>
Quando o atributo é definido, a reprodução do arquivo de áudio começa automaticamente assim que for carregado. Normalmente, não se deve definir esse atributo, pois os visitantes devem poder decidir quando reproduzir um arquivo de áudio.
Além disso, o atributo loop é interessante. Esse atributo garante que o arquivo seja reproduzido em loop.
Assim como para vídeos, para arquivos de áudio, existem os atributos type e media. Portanto, aqui também é possível especificar os tipos MIME e codecs correspondentes. A especificação HTML5 lista as seguintes informações típicas para o atributo type:
• type='audio/ogg; codecs=vorbis'
• type='audio/ogg; codecs=speex'
• type='audio/ogg; codecs=flac'
Observe que esses dois atributos são exclusivos para o elemento source, não para o elemento audio.
Integrar Flash & Co.
Filmes em Flash puderam ser incorporados em versões anteriores do HTML por meio de uma combinação de embed e object. A sintaxe resultante - por sinal, muito feia - se parecia, por exemplo, assim:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="800" height="600"> <param name=movie value="intro.swf"> <param name=quality value=high> <embed src="intro.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="800" height="600"> </embed> </object>
Este é o caminho clássico por meio dos elementos object e embed, que existe há muito tempo no HTML. No entanto, "clássico" aqui não significa que esta variante tenha sido aprovada no passado pela W3C. Pois no HTML 4, o elemento object foi favorecido e corretamente interpretado pelo Internet Explorer. Diferente do Netscape Navigator, que apostou no elemento embed. Essa interpretação divergente fez com que a combinação de object e embed fosse necessária.
O HTML5 oficialmente disponibiliza agora os elementos object e embed para incorporar conteúdos ativos.embed é um contêiner destinado a exibir conteúdos não HTML, não cobertos por outros elementos como img, vídeo, audio, etc. Normalmente, plug-ins de navegador são necessários para reproduzir o conteúdo incorporado.
Usando embed, agora é possível incorporar filmes em Flash de forma padronizada. Aqui está um exemplo de como isso pode ser feito:
<embed
src="http://www.youtube.com/v/v1PgiBpTtao?fs=1&hl=de_DE"
type="application/x-shockwave-flash"
width="384"
height="313"
allowscriptaccess="always"
allowfullscreen="true"
/>
O elemento embed pode receber vários atributos. O mais importante é, naturalmente, o atributo src. Através dele, especifica-se o arquivo a ser incorporado. O atributo type especifica o tipo MIME.
No caso do Flash, este é application/x-shockwave-flash. Se, por outro lado, quiser incorporar um arquivo LaTeX, você anota application/x-latex. A largura e altura do arquivo incorporado são ajustadas por meio dos atributos width e height.
Existem, aliás, outros atributos que não fazem parte oficialmente do HTML5. No entanto, permitem controlar o plug-in usado. Assim, no exemplo anterior, através dos dois "atributos Flash" allowscriptaccess e allowfullscreen, foi especificado que o acesso a scripts e o modo de tela cheia são possíveis. Mas também há o atributo quality, que permite determinar a qualidade do filme em Flash.
<embed
src="flash.swf"
width="600" height="300"
type="application/x-shockwave-flash"
quality="high"
/>O elemento object
O elemento object funciona de forma semelhante ao embed como um contêiner de conteúdo. Em contraste com o embed, no entanto, o object possui três modelos de conteúdo diferentes. Se o navegador reconhecer que se trata de uma imagem diretamente exibível, ele se comportará como se fosse um elemento img. Quando o objeto referenciado é um conteúdo web, ele será exibido em um iFrame. (Mais sobre os iFrames mais adiante nesta série). Para outros conteúdos, o object se comporta como o embed.
O exemplo a seguir mostra a incorporação de um filme em Flash através do elemento object.
<object
type="application/x-shockwave-flash"
data="http://www.youtube.com/v/BzYBY_9rnuA?version=3&hl=de_DE&rel=0"
width="400"
height="300">
<param name="allowscriptaccess" value="always" />
<param name="allowfullscreen" value="true" />
<p>
Seu navegador não possui o plug-in do Flash.
</p>
</object>Por fim, fica a pergunta se deve-se usar object ou embed. À primeira vista, os dois elementos parecem ser quase idênticos. E, de fato, o elemento object pode fazer tudo o que o elemento embed pode.
Para incorporar conteúdo - exceto imagens - deve-se normalmente recorrer ao elemento object. Esse elemento permite especificar conteúdos alternativos que serão exibidos caso o elemento incorporado não possa ser carregado.
