Há alguns meses iniciei uma série de posts sobre HTML 5. O objetivo desta série é apresentar os apectos principais do novo modelo estrutural padrão das páginas web proposto pela WC3.
Minha ideia inicial era que neste ponto da timeline, a série estivesse em um ponto bem mais avançado em relação ao que se encontra, entretanto, algumas situações (a saber, mudança de lugar de trabalho, mudança de residência, etc.) impossibilitaram o progresso no ritmo imaginado. Assim, com o post de hoje, retomo a série sobre HTML 5 (você pode encontrar os posts que já escrevi para esta série clicando AQUI).
Seguindo com a ideia de apresentar primeiro os elementos “legais”, hoje apresento a tag “<audio>”, seus desdobramentos e fomas de utilização com exemplos práticos.
Conceitos gerais sobre <audio>
Para que possamos entender o que é e para o que serve a tag áudio, imagine que não houvesse HTML 5 e que seu cliente fizesse questão absoluta que seu site ao abrir, por exemplo, inicializasse a execução de uma canção em background enquanto o usuário navega. A pergunta aqui é: qual tecnologia/metodologia a ser utilizada para alcançar realizar esta tarefa? Algumas respostas poderiam ser: Flash, Silverlight, Java Applet, etc. Este modelo (que ainda é predominante em websites e demais sistemas web) possui/possuía (como preferir tratar) alguns problemas. Vou citar apenas dois:
- Utilização de uma tecnologia terceira para executar: o problema aqui não é o fato de a tecnologia ser distribuída pela empresa A ou B, mas sim que, para que o usuário final consiga executar o recurso, é preciso que ele possua certo plugin devidamente instalado e configurado. Mesmo sendo recursos amplamente utilizados, não é difícil encontrar computadores cujos vídeos/áudios de determinado site não funciona corretamente. O melhor dos mundos sugere que este tipo de recurso seja nativo, concordam?
- Exigência de mais conhecimento por parte dos técnicos: sim, um especialista em C# precisava recorrer a livros, sites ou soluções “enlatadas” para solucionar estes entraves. Não era bacana para o desenvolvedor nem para o cliente. Novamente, o melhor dos mundos sugeriria que este recurso fosse nativo, não?
A tag <audio> foi proposta com o objetivo de solucionar estes e outros problemas. Com o advento do HTML 5, é possível referenciar arquivos de áudio de forma nativa na estruturação do documento, sem a necessidade de plugins ou tecnologias terceiras.
Formatos aceitos
Na ocasião em que este post foi escrito, os browser’s suportavam nativamente dois formatos de áudio. A saber:
- OGG: desenvolvido pela Xiph.org é um formato livre de encapsulamento multimídia. Isso siginifica que, por não estar preso há um recipiente de áudio (como é o caso do MP3, por exemplo), áudios no formato ogg não precisam realizar buffer de uma só vez para que no momento posterior possa ser reproduzido, ao contrário, o arquivo vai sendo baixado e reproduzido sob demanda. Este modelo de stream é amplamente utilizado em rádios pela internet.
- MP3: o mais tradicional arquivo de áudio de nossos dias. Sua ampla adoção se deve à sua principal característica, a saber, boa qualidade de reprodução e um alto nível de compactação, o que faz com que uma quantidade maior de arquivos possa estar armazenada no mesmo espaço de disco.
Como ainda não existe um consenso sobre qual o formato padrão a ser adotado, a implementação dos arquivos ficará a cargo dos fabricantes dos browsers. A propósito, todos os principais navegadores do mercado oferecem suporte nativo a nova tag <audio>.
Adicionando a <audio> a página web
O processo de inserção da tag audio é extremamente simplificado (como tudo em HTML 🙂 ). Considere o exemplo apresentado na Listagem 1 (abaixo).
[html]</pre>
<audio width=”300″ height=”32″ controls=”controls”><source src=”blind_willie.mp3″ type=”audio/mp3″ />
Seu navegador não suporta a tag audio
</audio>
<pre>
[/html]
Listagem 1: Adicionando a tag audio ha uma página HTML
Você pode visualizar o exemplo do trecho de código apresentado acima clicando aqui.
Como você pôde perceber, a tag <audio> permite implementar um ambiente cross para os arquivos. Com <audio>, estamos indicando ao browser que a partir dali será criada uma região para adição de arquivos de áudio. A seguir, o elemento source permite adicionar o apontamento para o(s) arquivo(s) de áudio a serem reproduzidos.
É importante mencionar que todos os atributos globais do HTML 5 são suportados para a tag audio. Você pode encontrar a referência completa dos elementos globais clicando aqui.
Para a tag interna source (apresentada na Listagem 1), são suportados os seguintes atributos (novos no HTML 5):
-
Autoplay: indica ao browser se o arquivo indicado para reprodução deverá iniciar automaticamente. Autoplay é um atributo “booleano”, portanto, pode ser inicializado das seguintes formas: autoplay=”autoplay” / autoplay=”” / ou ainda simplesmente autoplay.
-
Controls: indica ao browser se os controles nativos do player (play, pause, etc.) devem ou não ser apresentados no processo de renderização. Novamente, controls é booleano, portanto, suas inicializações devem seguir o mesmo modelo apresentado para autoplay.
-
Loop: indica ao browser se o arquivo sendo reproduzido, ao fim de sua execução, deverá ser executado novamente de forma automática. Os valores possíveis seguem os modelos apresentados nos dois ítens anteriores.
-
Src: é o elemento que permite indicar o caminho relativo do arquivo de áudio a ser reproduzido.
-
Preload: indica ao browser a forma como o arquivo a ser reproduzido deve ser previamente carregado. Os valores disponíveis são: auto (carrega o arquivo como um todo com o load da página); metadata (carrega apenas os metadados no load da página); none (não carrega o arquivo no load).
Por hora é isso pessoal! Agora é só enfiar a cara nos estudos e fazer vários exemplos para exercitar os conceitos. Quaisquer dúvidas, utilizem os comentários do post ou ainda o formulário de contato do site.
Abraços!
Facebook
Twitter
Instagram
LinkedIn
RSS