Estrutura

Como Criar um Player de Áudio só com HTML5 – Inclui Controles DOM

Google+ Pinterest LinkedIn Tumblr
Anúncios Google

Se você costuma postar áudio em seus blogs e quando vai fazê-lo usa o YouTube, com um vídeo (na verdade uma imagem estática) e o fundo musical, esqueça. Não é nada tão difícil colocar um player de áudio para o leitor tocar música direto na sua página.

Tem um monte de ferramentas disponíveis por aí para controlar a execução de áudio, alguns complicados e com tecnologias em desuso como Flash, mas já não vejo muito sentido em usar isso se pode ser feito com HTML5 – até o Internet Explorer está mais tolerante com novidades e na versão 10 aceita essas marcações sem problema.

Vou mostrar como criar players de áudio usando HTML5. Através de eventos DOM (Document Objetc Model) também veremos como criar controles personalizados para o player, se preciso. Com os navegadores atualizados a compatibilidade é total, mas precisando de recursos mais avançados como playlist e efeitos, considere outro método como o Soundmanager.

Doctype

Primeiro, certifique-se de que seu blog está no DOCTYPE certo. No header.php (falando do WordPress, se for outra plataforma procure pelo trecho do código onde está o header), logo no começo, deve ter em algum lugar:

<!DOCTYPE html>

Só isso, nada de DOCTYPES transitional ou outros. Esse doctype informa ao navegador que tipo de página ele está recebendo e como deve interpretá-la, impedindo assim ocasionais erros na leitura de caracteres, por exemplo.

Compatibilidade com IE

Depois, você deve lembrar que navegadores antigos podem não entender direito aquele player ou qualquer outra marcação em HTML5. Se seu blog pretende atingir o maior público possível, talvez não seja recomendável usar só esse método.

Pra minimizar os danos, garantimos que pelo menos o Internet Explorer desatualizado entenda o que vamos fazer inserindo o seguinte dentro da área do header (antes do fechamento </head>).

<!--[if IE]><script src"http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Menos mal. Para garantir também que seu áudio toque na maior variedade de navegadores e dispositivos, é preciso fornecê-lo em dois formatos: mp3 e ogg. Por quê?

Formatos de arquivo

Veja a lista de compatibilidade de formatos de arquivo com os navegadores:

Navegador Sistema Formatos de arquivo e navegador mínimo
Ogg Vorbis WAV PCM MP3 AAC WebM Vorbis Ogg Opus
Google Chrome Todos suportados 9 SIM SIM SIM SIM 25
Internet Explorer Windows NÃO NÃO 9.0 9.0 NÃO NÃO
Mozilla Firefox (Gecko) Todos suportados 3.5 (1.9.1) 3.5 (1.9.1) 21.0 (21.0),

Windows
21.0 (21.0),

Windows
4.0 (2.0) 15.0 (15.0)
Opera Todos suportados 10.50 11.00 NÃO NÃO 10.60 NÃO
Safari OS X NÃO 3.1 3.1 3.1 NÃO NÃO

Fonte: Wikipedia

Ou seja, por enquanto ainda não há um “formato universal” compatível com todos os navegadores. O Chrome aceita todos a partir da versão 25, mas o Internet Explorer só MP3 e AAC a partir do 9, enquanto o Opera já não aceita nenhum dos dois, mas só Ogg, Wav e WebM…

Assim, Ogg e MP3 “completam” o quadro para compatibilidade mínima com um dos formatos por cada navegador, para ninguém ficar sem ouvir o arquivo. Se seu áudio está em outro formato, use um programa para convertê-lo e assim ter dois arquivos.

Use um programa como Miro Video Converter (que também serve para áudio) para criar os arquivos nos formatos MP3 e OGG.

Miro converter audio

Envie os arquivos para o servidor, pode usar o gerenciador de mídia do WordPress para isso (menu Mídia > Adicionar Nova, então arraste os dois arquivos para a janela e aguarde o upload).

Criando o player

O código básico para mostrar o player é:

 <audio controls preload>
 <source src="arquivo.ogg" type="audio/ogg">
 <source src="arquivo.mp3" type="audio/mpeg">
Seu navegador não suporta áudio em HTML5, atualize-o.
 </audio>

A tag audio é óbvia; controls exibe os controles básicos da mídia, como o botão play, barra de progresso, etc. O preload determina o precarregamento do arquivo mesmo antes de clicar em play, sendo portanto, opcional.

Depois estão as chamadas dos dois arquivos de áudio. Se o navegador não consegue lidar com um, parte para o outro, assim temos certeza de que ao menos um deles vai funcionar. A mensagem final aparece caso o navegador não seja compatível com HTML5 audio.

Mudando para os url dos arquivos que enviamos, temos:

 <audio controls preload>
 <source src="arquivo.ogg" type="audio/ogg">
 <source src="arquivo.mp3" type="audio/mpeg">
Seu navegador não suporta áudio em HTML5, atualize-o.
 </audio>

Que resulta nisso:

Mas e se o navegador não suportar HTML5, o leitor fica sem ter como executar o arquivo?

Pra isso tem um contorno: basta inserir uma chamada de player em Flash dentro da marcação audio; se o HTML5 não funcionar, o navegador pega esse player em Flash.

Mas você vai precisar de um player pronto em Flash, tem vários por aí que podem ser baixados de graça, muito bons, como esse NiftyPlayer. Baixe, hospede os arquivos em seu servidor e construa o código como abaixo, o meu código ficou assim (usando o niftyplayer):

 <audio controls preload>
 <source src="arquivo.ogg" type="audio/ogg">
 <source src="arquivo.mp3" type="audio/mpeg">
Seu navegador não suporta áudio em HTML5, atualize-o.

<object class="playerpreview" data="url-do-flash-player.swf" height="25" type="application/x-shockwave-flash" width="200">

<param name="movie" value="url-do-flash-player.swf" />
<param name="FlashVars" value="mp3=arquivo.mp3" />
<embed href="url-do-flash-player.swf" width="200" height="20" name="movie" align="" type="application/x-shockwave-flash" flashvars="mp3=arquivo.mp3">
</embed>
</object>
</audio>

Se o HTML5 não funcionar, o leitor verá o player em Flash, esse:

Não esqueça de incluir no blogs a chamada do script do niftyplayer, colocando na header:

<script type="text/javascript" language="javascript" src="url/niftyplayer.js"></script>

Atributos

O player em HTML5 tem alguns atributos para adicionar funções. Não vou citar todos aqui, mas os mais usados em players simples que o nosso alvo de estudos agora:

  • preload: como dito antes, faz o carregamento prévio do arquivo, assim, quando clicar em Play, o áudio não vai ficar engasgando.
  • autoplay: manda o navegador executar o arquivo imediatamente ao carregar.
  • loop: para repetir a execução após seu final, indefinidamente.
  • controls: já usamos no exemplo anterior. Exibe os controles do arquivo, como botões play e pause, etc. Sem ele, podemos colocar uma música de fundo na página – sem controls e com autoplay (mas não faça isso pois é muito chato!).

Controles

Se precisar de mais controles para o player em HTML5, pode usar eventos DOM de Javascript para botões. Assim você pode personalizar o play, pause, etc.

Nesse exemplo são usados eventos onclick para “programar” os botões de controle que incluem ainda avanço e retrocesso de 2 segundos. Ao pausar, um evento onpause abre um alerta simples, e o botão INFO mostra o tempo da faixa, através da propriedade duration.

<script>
function pega_tempo(){
alert("Duração da faixa: "+document.getElementById("demo").duration);
} 
function alertaPausa(){
alert("Olá!nPor que pausou? Clique Play pra tocar o resto!");
}
</script>

<audio id="demo" controls onpause="alertaPausa()">
<source src="arquivo.ogg" type="audio/ogg">
<source src="arquivo.mp3" type="audio/mpeg">
Seu navegador não suporta áudio em HTML5, atualize-o.
</audio>

<div>
<button onclick="document.getElementById('demo').play()">►</button>
<button onclick="document.getElementById('demo').pause()">||</button>
<button onclick="document.getElementById('demo').volume+=0.1">▲</button>
<button onclick="document.getElementById('demo').volume-=0.1">▼</button>
<button onmousedown="document.getElementById('demo').currentTime+=2">»</button>
<button onmousedown="document.getElementById('demo').currentTime-=2">«</button>
</div> 
<button onclick="pega_tempo()" type="button">CLIQUE-ME</button>

Veja o resultado:

Aqui tem uma lista com eventos, métodos e tudo mais para elementos multimídia (áudio e vídeo).

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

Pin