Tableless

Busca Menu

HTML5: Elemento AUDIO

Seja o primeiro a comentar por

O elemento audio do HTML5 representa um som ou um stream de áudio. Atributos como: src, preload, autoplay, loop e controls podem ser utilizados em todos elementos de media, como o elemento audio.

Formatos suportados

Os formatos de audio suportados são:

Formato IE 8 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis Não Sim Sim Sim Não
MP3 Não Não Não Sim Sim
Wav Não Sim Sim Não Sim

Como no caso dos vídeos, ainda é um problema termos um formato que funcione com sucesso em todos os browsers. Enquanto isso, para mantermos a compatibilidade precisamos servir diversos formatos.

Sintaxe

A sintaxe é muito simples:


Colocando um conteúdo dentro da tag para que browsers que não suportam possam baixar este arquivo.


Suponha então que você tenha que servir dois tipos de formatos de audio para cobrir a maioria dos browsers:


Resultado:

Se você entrar com o Internet Explorer, provavelmente ele mostrará a mensagem para baixar o arquivo que colocamos. 😉

Os atributos possíveis

Atributo Valor Descrição
autoplay autoplay Define que o audio começará a ser tocado assim que ele estiver pronto.
controls controls Os controles serão mostrados.
loop loop Define que o audio começará a ser tocado novamente quando terminar.
preload preload Define que o audio será carregado enquanto a página é lida. Esse atributo é ignorado caso o atributo autoplay estiver definido.
src url URL do arquivo a ser tocado.

Você tem algum controle sobre o player que aparece no browser com CSS. Testando aqui, customizamos largura, altura, colocamos float e position. Por natureza ele é um elemento de bloco. Isso acontece também com os elemento sde vídeo. A graça disso tudo é que tanto o elemento de vídeo quanto o elemento de audio são tratados como elementos do HTML e não como plugins. Isso nos dá essa flexibilidade de customização via CSS, facilitando muito as coisas.

O elemento audio do HTML5 representa um som ou um stream de áudio. Atributos como: src, preload, autoplay, loop e controls podem ser utilizados em todos elementos de media, como o elemento audio.

Formatos suportados

Os formatos de audio suportados são:

Formato IE 8 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis Não Sim Sim Sim Não
MP3 Não Não Não Sim Sim
Wav Não Sim Sim Não Sim

Como no caso dos vídeos, ainda é um problema termos um formato que funcione com sucesso em todos os browsers. Enquanto isso, para mantermos a compatibilidade precisamos servir diversos formatos.

Sintaxe

A sintaxe é muito simples:


Colocando um conteúdo dentro da tag para que browsers que não suportam possam baixar este arquivo.


Suponha então que você tenha que servir dois tipos de formatos de audio para cobrir a maioria dos browsers:


Resultado:

Se você entrar com o Internet Explorer, provavelmente ele mostrará a mensagem para baixar o arquivo que colocamos. 😉

Os atributos possíveis

Atributo Valor Descrição
autoplay autoplay Define que o audio começará a ser tocado assim que ele estiver pronto.
controls controls Os controles serão mostrados.
loop loop Define que o audio começará a ser tocado novamente quando terminar.
preload preload Define que o audio será carregado enquanto a página é lida. Esse atributo é ignorado caso o atributo autoplay estiver definido.
src url URL do arquivo a ser tocado.

Você tem algum controle sobre o player que aparece no browser com CSS. Testando aqui, customizamos largura, altura, colocamos float e position. Por natureza ele é um elemento de bloco. Isso acontece também com os elemento sde vídeo. A graça disso tudo é que tanto o elemento de vídeo quanto o elemento de audio são tratados como elementos do HTML e não como plugins. Isso nos dá essa flexibilidade de customização via CSS, facilitando muito as coisas.

Caminho das pedras para customizar

Você pode criar seu próprio player se preferir. Você pode manipular os controles de som como PLAY, PAUSE, VOLUME com outros elementos do HTML. Isso facilita a customização do player caso você não queira utilizar o player padrão do browser. Se souber um pouco de Javascript, você já entenderá o que pode ser feito com o código abaixo.

Teste abaixo:




Customizando estes botões com CSS e aprimorando o Javascript, você consegue fazer um player bem desenhado e que funciona em diversas plataformas.

Publicado no dia