Tag audio

Desde que a conexões com internet se tornou rápida suficiente para tocar sons nos sites, o Flash tem disponibilizado ferramentas para quem quer tocar sons no seu site. Mas o HTML 5 vai mudar a forma que os desenvolvedores tocam sons online. Nesse artigo, vou mostrar como você poderá usar a tag <audio> para tocar sons no seu site.

Usando a tag <audio> para inserir som no seu site

Nesse exemplo eu carrego um arquivo mp3 e toco ele. Note que o atributo autoplay faz o som ser tocado automaticamente. Esse é o uso mais básico da tag <audio>.

[code language=”html”]

<audio src=”som.mp3” autoplay></audio>

[/code]

Tocando o som em loop

Quer tocar um som em loop? O atributo loop está aqui para ajudar você. Você pode usar o atributo autoplay e loop para tocar sons no seu site automaticamente e em loop, porem isso é muito ruim para os usuários.

[code language=”html”]

<audio src=”som.mp3” autoplay loop></audio>

[/code]

Mostre os controles do <audio>

Ao invés de tocar som automaticamente, pratica na qual é definitivamente ruim para o usuário, você pode mandar o navegador mostrar alguns controles como por exemplo, volume e botões de play/pause. Isso pode ser feito facilmente, simplesmente adicionando o atributo controls.

[code language=”html”]

<audio src=”som.mp3” controls></audio>

[/code]

Múltiplos formatos de arquivos

tag <audio> é suportada pelos navegadores mais modernos, mas o problema é que os navegadores não suportam o mesmo formato de arquivo. Por exemplo, o Safari pode tocar mp3, mas o Firefox não, ao invés ele toca o formato ogg.

A solução para esse problema é usar vários formatos de arquivos.

[code language=”html”]

<audio controls>
<source src=”som.mp3”>
<source src=”som.ogg”>
</audio>

[/code]

Especificando MIME types

Quando utilizamos diferentes formatos de arquivo, uma boa prática é especificar o MIME type de cada arquivo, para ajudar o navegador a reconhecer o formato do arquivo. Isso pode ser feito facilmente, usando o atributo type.

[code language=”html”]

<audio controls>
<source src=”som.mp3” type=”audio/mp3”>
<source src=”som.ogg” type=”áudio/ogg”>
</audio>

[/code]

Fallback para navegadores antigos

E se o usuário estiver usando o IE6 ou outro navegador pré-histórico sem suporte a tag<audio>?

Um fallback pode ser implementado facilmente, como mostrado abaixo, uma mensagem é mostrada para usuários com navegador que não suportam a tag <audio>.

[code language=”html”]

<audio controls>
<source src=”som.mp3” type=”audio/mp3”>
<source src=”som.ogg” type=”áudio/ogg”>
<p>Seu navegador não suporta a tag audio!</p>
</audio>

[/code]

Buffer

Quando tocamos um arquivo grande, uma boa idéia é fazer um buffer do arquivo. Para fazer isso basta usar o atributo preload. Ele aceita 3 valores:

  • None: para não ser feito o buffer do áudio;
  • Auto: para fazer o buffer do áudio;
  • Metadata: para fazer o buffer apenas dos metadados, como nome do artista, tempo de duração, etc…

[code language=”html”]

<audio controls preload="auto">
<source src=”som.mp3” type=”audio/mp3”>
<source src=”som.ogg” type=”áudio/ogg”>
</audio>

[/code]

Controle o <audio> com Javascript

Controlar a tag <audio> com Javascript é bem fácil. O exemplo a seguir mostra como criar um player de áudio com controles básicos (play, pause, aumentar volume, diminuir volume) usando HTML e Javascript.

[code language=”html”]

<audio id="player" src="sound.mp3"></audio>

<div>
<button onclick="document.getElementById(‘player’).play()">Play</button>
<button onclick="document.getElementById(‘player’).pause()">Pause</button>
<button onclick="document.getElementById(‘player’).volume+=0.1">Volume Up</button>
<button onclick="document.getElementById(‘player’).volume-=0.1">Volume Down</button>
</div>

[/code]

Espero que este artigo tenha ajudado a entender melhor a tag <audio>. Dúvidas e sugestões, sinta-se a vontade para comentar abaixo!

Post adaptado de Mastering the HTML5 <audiotag escrito por Jean-Baptiste

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *