Logo SatellaSoft



Reproduzindo áudio com HTML 5 - Audio Tag

Utilizando e manipulando elemento


Ícone homem Gunnar Correa
Ícone data de publicação 09/07/2015
Ícone quantidade de visualização 4,570
Ícone bandeira do Brasil Português

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!




Sobre o autor


Gunnar Correa

Nome: Gunnar Correa

Site: http://www.gunnarcorrea.com


Autodidata, graduado em Desenvolvimento Web e especialista em Tecnologias na Educação em uma universidade no interior de São Paulo. Comecei meus estudos na área de programação quando ainda era criança, e atualmente estou estudando desenvolvimento de jogos.

Sou o CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.


Comentários



É necessário estar autenticado para comentar, clique aqui para se registrar ou aqui para acessar a sua conta!