Reproduzindo áudio com HTML 5 - Audio Tag
Utilizando a tag do HTML 5, podemos reproduzir áudios através de componentes nativos.
Desde a origem da Internet, o desejo sempre foi a reprodução e transmissão de Áudio e Vídeo, e atualmente isto já é possível com diversos tipos de Tecnologias, como Facebook por exemplo, já permitem a reprodução de áudio e vídeo, inclusive videoconferência em tempo real com qualquer contato.
Na versão anterior do HTML, trabalhar com áudio é algo muito chato, muitos recorriam a Players desenvolvidos em SWF, mas este tipo de Player costuma travar e ser pesado, outras soluções era usar recursos do ActiveX para Internet Explorer.
Este tempo passou, agora estamos em uma era onde podemos utilizar qualquer recurso de áudio e vídeo em qualquer aplicação.
Com HTML 5 podemos utilizar recursos de áudio para reproduzir músicas, trilhas ou efeitos sonoros, ainda é possível enviar mais de um formato de áudio, se um determinado navegador não suportar um arquivo, ele pode executar outro.
Para reproduzir um áudio, basta utilizar a Tag <audio></audio>, veja no exemplo abaixo, a reprodução de um arquivo chamado audio.mp3.
Código 01:
<audio controls="controls" src="audio.mp3"></audio>
Note que neste exemplo, utilizamos o atributo controls, ele exibe no navegador os controles de Play, Pause, Navegação, Volume e Mute, conforme apresentado na imagem abaixo.
Podemos utilizar outros atributos que são:
Autoplay – Reproduz o áudio sem automaticamente, assim que carregado.
controls – Exibe o controle de mídia.
loop – Repete o áudio assim que acabar.
muted – Deixa o controle com a opção mudo ativado.
Existe outro atributo que é o preload, este atributo deve ser utilizado em arquivos de áudio grande, ele assume três valores, que são:
none – Não carrega o arquivo, quando inicializado.
auto – Carrega o arquivo de áudio quando inicializado.
metadata – Carrega os meta dados.
Veja o exemplo com todos atributos abordados.
Código 02:
<audio controls="controls" autoplay="autoplay" muted="muted" loop="loop" src="audio.mp3" preload="auto"></audio>
Agora imagine que seja utilizado um arquivo do tipo .wav, mas o navegador não suporta a reprodução deste arquivo, a Tag audio, nos possibilita inserir outra Tag que é utilizada para informar os midias type e o caminho de outras extensões, esta Tag é o <Source>. Ainda é possível deixar uma mensagem para o usuário caso o Browser não carregar o arquivo.
Veja o exemplo a seguir, note que está sendo utilizado dois arquivos diferentes, um no formato mp3 e outro ogg.
Código 03:
<audio controls="controls" id="audio">
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Seu navegador não tem suporte a Tag Audio.
</audio>
No atributo Type devemos informar qual o midia type do arquivo, os valores válidos são.
|
Formato do Arquivo |
Midia Type |
|
.MP3 |
audio /mpeg |
|
.OGG |
audio /ogg |
|
.WAV |
audio /wav |
Com este elemento, você elemento você pode criar várias modelos diferentes de Playlist com Javascript, veja no código abaixo, os controles de Play, Pause e volume, eles controlam as ações da Tag <audio>.
Código 04:
<!doctype html>
<html lang="pt-br">
<head>
<title>Audio</title>
<meta charset="utf-8" />
<script>
document.addEventListener("DOMContentLoaded", function(){
var audio = document.getElementById("audio");
document.getElementById("play").addEventListener("click", function(){
audio.play();
console.log("Play");
}, false);
document.getElementById("pause").addEventListener("click", function(){
audio.pause();
console.log("pause");
}, false);
document.getElementById("volume").addEventListener("mousemove", function(){
var volume = document.getElementById("volume").value;
audio.volume = volume;
console.log(volume);
}, false);
}, false);
</script>
</head>
<body>
<audio controls="controls" id="audio">
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Seu navegador não tem suporte a Tag Audio.
</audio>
<br />
<button id="play">Play</button>
<button id="pause">Pause</button>
Volume: <input type="range" id="volume" min="0.0" max="1" value="0.5" />
</body>
</html>
Espero que tenham aprendido, até a próxima!