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:
<th width="16%" align="left">
IE 8
</th>
<th width="16%" align="left">
Firefox 3.5
</th>
<th width="16%" align="left">
Opera 10.5
</th>
<th width="16%" align="left">
Chrome 3.0
</th>
<th width="16%" align="left">
Safari 3.0
</th>
<td>
<span class="marked">Não</span>
</td>
<td>
Sim
</td>
<td>
Sim
</td>
<td>
Sim
</td>
<td>
<span class="marked">Não</span>
</td>
<td>
<span class="marked">Não</span>
</td>
<td>
<span class="marked">Não</span>
</td>
<td>
<span class="marked">Não</span>
</td>
<td>
Sim
</td>
<td>
Sim
</td>
<td>
<span class="marked">Não</span>
</td>
<td>
Sim
</td>
<td>
Sim
</td>
<td>
<span class="marked">Não</span>
</td>
<td>
Sim
</td>
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:
Você pode baixar essa música gratuitamente no Public Domain 2Ten.
Se você entrar com o Internet Explorer, provavelmente ele mostrará a mensagem para baixar o arquivo que colocamos. 😉
Os atributos possíveis
<th align="left" width="20%">
Valor
</th>
<th align="left" width="50%">
Descrição
</th>
<td>
autoplay
</td>
<td>
Define que o audio começará a ser tocado assim que ele estiver pronto.
</td>
<td>
controls
</td>
<td>
Os controles serão mostrados.
</td>
<td>
loop
</td>
<td>
Define que o audio começará a ser tocado novamente quando terminar.
</td>
<td>
preload
</td>
<td>
Define que o audio será carregado enquanto a página é lida. Esse atributo é ignorado caso o atributo autoplay estiver definido.
</td>
<td>
<i>url</i>
</td>
<td>
URL do arquivo a ser tocado.
</td>
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:
<th width="16%" align="left">
IE 8
</th>
<th width="16%" align="left">
Firefox 3.5
</th>
<th width="16%" align="left">
Opera 10.5
</th>
<th width="16%" align="left">
Chrome 3.0
</th>
<th width="16%" align="left">
Safari 3.0
</th>
<td>
<span class="marked">Não</span>
</td>
<td>
Sim
</td>
<td>
Sim
</td>
<td>
Sim
</td>
<td>
<span class="marked">Não</span>
</td>
<td>
<span class="marked">Não</span>
</td>
<td>
<span class="marked">Não</span>
</td>
<td>
<span class="marked">Não</span>
</td>
<td>
Sim
</td>
<td>
Sim
</td>
<td>
<span class="marked">Não</span>
</td>
<td>
Sim
</td>
<td>
Sim
</td>
<td>
<span class="marked">Não</span>
</td>
<td>
Sim
</td>
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:
Você pode baixar essa música gratuitamente no Public Domain 2Ten.
Se você entrar com o Internet Explorer, provavelmente ele mostrará a mensagem para baixar o arquivo que colocamos. 😉
Os atributos possíveis
<th align="left" width="20%">
Valor
</th>
<th align="left" width="50%">
Descrição
</th>
<td>
autoplay
</td>
<td>
Define que o audio começará a ser tocado assim que ele estiver pronto.
</td>
<td>
controls
</td>
<td>
Os controles serão mostrados.
</td>
<td>
loop
</td>
<td>
Define que o audio começará a ser tocado novamente quando terminar.
</td>
<td>
preload
</td>
<td>
Define que o audio será carregado enquanto a página é lida. Esse atributo é ignorado caso o atributo autoplay estiver definido.
</td>
<td>
<i>url</i>
</td>
<td>
URL do arquivo a ser tocado.
</td>
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:
Você pode baixar essa música gratuitamente no Public Domain 2Ten.
Customizando estes botões com CSS e aprimorando o Javascript, você consegue fazer um player bem desenhado e que funciona em diversas plataformas.