Reproduzindo áudio com HTML 5 - Audio Tag

Gunnar CorreaGunnar Correa09/07/2015 às 07:40:06 - 15.649 acessos

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.

Reproduzindo áudio com HTML 5

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 midiatype 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>


Reproduzindo áudio com HTML 5 - player

Espero que tenham aprendido, até a próxima!


audio tag html 5 vídeo aula tutorial desenvolvimento atributos documentação audio source som musica player

Compartilhe


Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web (FIPP), Especialista em Tecnologias na Educação (Unoeste) e Pós-graduando em Segurança da Informação (Universidade Cruzeiro do Sul). Começou seus estudos na área de programação quando era criança, e atualmente está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.



Site atualizado

Olá, nosso site recebeu uma nova atualização e por conta disso, alguns artigos ainda estão sendo atualizados. Dependendo do conteúdo que você procura, poderá encontrar imagens e trechos de códigos mal formatados.

Estamos trabalhando para normalizar todos os conteúdos, muito em breve, esse problema não mais existirá.


Comentários