HTML5 Audio Player - Dica

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (1)  (0)

Veja nessa dica como criar e inserir um player de áudio com html5 em seu website/sistema web.

Assim como funciona com vídeos, a nova versão do html, o html5 permite que os usuários insiram arquivos de áudio para serem reproduzidos diretamente no browser, sem o uso de nenhum plugin ou hack, apenas usando a nova tag <audio>.

A sua sintaxe é bem simples e é necessário apenas saber o caminho dentro do sistema local/ftp ou a url do arquivo de áudio específico, veja um exemplo de uso na Listagem 1.

Listagem 1: Usando a tag Audio no HTML5

<!DOCTYPE html>
<html>
<head>
<title>Tag Audio HTML5</title>
</head>
<body>

<audio controls>
  <source src="ArquivoDeAudio.ogg" type="audio/ogg">
  <source src="ArquivoDeAudio.mp3" type="audio/mpeg">
Seu navegador não suporta a tag áudio
</audio>

</body>
</html>

Quando usamos a palavra “controls” dentro da tag áudio, o navegador do usuário insere os controles de áudio, como o botão play, pause e volume. Inserimos também, dentro da tag, um texto para se caso o navegador do usuário não suportar a tag, irá aparecer essa mensagem para ele, dizendo que o browser dele não suporta.

Abaixo segue uma tabela de compatibilidade dos navegadores com os tipos de arquivos de áudio suportados por eles.

Browser MP3 Wav Ogg
Internet Explorer 9+ SIM NÃO NÃO
Chrome 6+ SIM SIM SIM
Firefox 3.6+ NÃO SIM SIM
Safari 5+ SIM SIM NÃO
Opera 10+ NÃO SIM SIM

O mime-type para cada tipo de arquivo de áudio é:

  • audio/mpeg
  • audio/ogg
  • audio/wav

Existem também outras formas de incrementar ainda mais o seu arquivo de áudio, é possível usar atributos como:

  • controls
  • autoplay
  • loop

Seu uso fica da seguinte forma:

Listagem 2: Adicionando atributos

<!DOCTYPE html>
<html>
<head>
<title>Tag Audio HTML5</title>
</head>
<body>

<audio controls autoplay loop>
  <source src="ArquivoDeAudio.ogg" type="audio/ogg">
  <source src="ArquivoDeAudio.mp3" type="audio/mpeg">
Seu navegador não suporta a tag áudio
</audio>

</body>
</html>
 

Em casos de o arquivo de áudio ser um arquivo muito grande, é importante que ele seja pré-carregado, dessa forma quando o usuário clicar no “Play” a exibição do arquivo será muito mais rápida, para isso existe o atributo preload, esse atributo possui 3 valores:

  • none: não carrega o arquivo
  • auto: carrega o arquivo
  • metadata: carrega os meta dados do arquivo

Listagem 3: Usando o atributo preload

<!DOCTYPE html>
<html>
<head>
<title>Tag Audio HTML5</title>
</head>
<body>

<audio preload="auto" controls>
  <source src="ArquivoDeAudio.ogg" type="audio/ogg">
  <source src="ArquivoDeAudio.mp3" type="audio/mpeg">
Seu navegador não suporta a tag áudio
</audio>

</body>
</html>

Esses foram alguns exemplos de uso da tag áudio em html5, espero que tenha ficado claro e que todos tenham entendido o funcionamento dessa nova tag.

Até a próxima.

Veja também

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?