Introdução ao elemento de áudio do HTML5

O Windows Internet Explorer 9 introduziu suporte ao áudio em HTML5.É possível usar o elemento audio para adicionar um player de áudio básico à sua página da Web sem que sejam necessários scripts ou controles complementares.

Reprodução de áudio mais simples possível

A principal forma de adicionar áudio a uma página da Web é usando o elemento audio. Assim como boa parte do novo suporte para HTML5, o elemento audio permite retornar com uma mensagem de erro ou outra tecnologia de reprodução se o navegador do usuário não der suporte para o elemento de áudio do HTML5, como aconteceria com os navegadores mais antigos. Você pode colocar uma mensagem de erro entre as marcas audio, conforme mostra o exemplo a seguir, ou inserir o código de um controle de player externo, como o plug-in de navegador Silverlight. O código de exemplo a seguir mostra uma página da Web simples que reproduz um arquivo de áudio.


<!doctype html>  
<html>
<head>
    <title>Audio Element Sample</title>
    <!-- Uncomment the following meta tag if you have issues rendering this page on an intranet site. -->    
    <!--  <meta http-equiv="X-UA-Compatible" content="IE=9"/> --> 
</head>
<body>
    <h1>Audio Element Sample</h1>
    
    <!-- Display the audio player with control buttons. -->
    <audio src="demo.mp3" controls autoplay loop> 
        HTML5 audio not supported
    </audio>
</body>
</html>


O elemento audio é adicionado diretamente ao código HTML usando a propriedade src para especificar o arquivo de áudio a ser reproduzido e o atributo controls para que os controles do player interno sejam usados. Se você usar o player integrado do navegador, nenhum script adicional será necessário. O estilo ou a funcionalidade do player integrado pode variar de navegador para navegador.

No Internet Explorer 9, o elemento audio exibe um player simples com controles básicos de reprodução, pausa, controle deslizante da posição e volume. O player também exibe o tempo de reprodução decorrido e o tempo restante no arquivo. Se você passar o mouse sobre uma das exibições de tempo, poderá avançar ou retroceder 30 segundos.

Imagem do player de áudio HTML5 no Internet Explorer 9

O elemento de áudio do Internet Explorer 9 dá suporte para dois outros atributos, autoplay e loop. autoplay solicita que o Windows Internet Explorer carregue e reproduza imediatamente o arquivo de áudio depois que o objeto audio é carregado. Isso é semelhante ao uso do bgsound elemento HTML. Diferentemente de bgsound, os controles pause e play permitem que os usuários da página da Web desativem o som. O atributo loop repete continuamente o arquivo de som desde o início. Se você não precisar de um dos controles integrados, não use os atributos.

No exemplo, o arquivo "demo.mp3" é um espaço reservado do próprio arquivo. Se o arquivo de áudio estiver no mesmo diretório que o código-fonte da página da Web, você poderá especificar apenas o nome do arquivo. Se o arquivo de áudio estiver em outro diretório, inclua o caminho como "music\demo.mp3". Se o arquivo estiver em outro site, use o nome de domínio e o caminho completos, como "http:\\www.contoso.com\music\demo.mp3".

Embora o elemento audio possa ser implementado apenas em HTML, com o uso do script, é possível melhorar a página da Web usando botões próprios, criando listas de reprodução ou adicionando status à reprodução. Para saber mais sobre o script do elemento audio, veja Usando JavaScript para controlar o objeto audio.

Observação  Se você estiver desenvolvendo em uma intranet e tiver problemas de renderização de HTML5, poderá adicionar <meta http-equiv-“X-UA-Compatible” content=”IE=edge”/> ao bloco <head> de uma página da Web para forçar o Internet Explorer a usar os padrões mais recentes. Se preferir, configure o servidor de desenvolvimento da Web para enviar um cabeçalho meta http-equiv-“X-UA-Compatible” com IE=edge. Para saber mais sobre a compatibilidade de documento, veja Definindo a compatibilidade de documento.

Referência de API

HTML5 Audio and Video

Amostras e tutoriais

Usando JavaScript para controlar o objeto de áudio
Usando eventos de mídia para adicionar uma barra de progresso
Dando suporte a mais de um formato de arquivo de áudio
Pausa ou alteração do volume da mídia quando você sair da página

Demonstrações do Test Drive do Internet Explorer

Explosão de áudio
Reprodutor de áudio HTML5 + lista de reprodução XML
IE Beatz
Fireflies

Postagens no blog do IE

Liberando o poder de <audio> em HTML5
Mesma marcação: usando <canvas>, <audio> e <video>

Especificação

HTML5: Seção 4.8.7

Tópicos relacionados

Liberando o poder do áudio em HTML5
Áudio nativo com HTML5

 

 

Mostrar:
© 2014 Microsoft