Trabalhando com a tag 'Audio' do HTML5

  • Artigo

Diego Blanco
Setembro 2011

Tecnologias:
HTML5

Uma das facilidades que o HTML5 traz para nós, é a possibilidade de colocar um áudio na sua página, sem que haja a necessidade de qualquer plugin (Flash, etc.), de uma forma bastante intuitiva e simples.

Nesse primeiro exemplo, vamos colocar um áudio para tocar, assim que a página for aberta, sendo esse áudio no formato mp3:

HTML

<!DOCTYPE HTML>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>HTML5 Audio</title>
</head>

<body>
<audio autoplay="autoplay">
    <source src="sua_musica.mp3" type="audio/mp3" />
</audio>
</body>

</html>

Podemos notar o uso da propriedade “autoplay” dentro da tag ‘audio’, para que o som seja executado no momento em que a página é carregada. O áudio está no formato ‘mp3’, mas podemos colocar ‘ogg’, entre outros.

Também podemos colocar esse áudio na forma de um player em nossa página, utilizando o código:

HTML

<!DOCTYPE HTML>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>HTML5 Audio</title>
</head>

<body>
<audio controls="controls">
    <source src="sua_musica.mp3" type="audio/mp3" />
</audio>
</body>

</html>

Assim, ele cria um player dentro da sua página e só roda o seu áudio no momento em que o usuário clicar no botão de “Play”.

Escrito por: Diego Blanco – Microsoft Technical Audience Team