Elemento HTML: áudio

Sintaxe

O O elemento requer uma tag de abertura e fechamento. Você pode passar um único src caminho:

1

 src="audio_file.mp3">

ou elementos de origem aninhados adicionais, caso você precise oferecer suporte a vários formatos de áudio.

1

2

   src="soundtrack.mp3 "type="audio/mpeg">

3

   src="soundtrack.ogg "type="audio/ogg">

4

Exemplo

Aqui está um exemplo de como usar o elemento para incorporar um único arquivo de áudio em sua página da web:

1

 controls>

2

   src="file.mp3 "type="audio/mpeg">

3

  Your browser does not support the audio element.

4

Resultado

ga-analytics#sendElementsClickEvent”>Faixa de Ukulele havaiano de Andy Slatter.

Atributos

Aqui estão alguns dos atributos mais comumente usados ​​para o

• src – Especifica o URL do arquivo de áudio a ser reproduzido.
• controls – Adiciona controles básicos de reprodução, como reproduzir, pausar e volume.
• autoplay – Inicia automaticamente a reprodução do arquivo de áudio quando a página é carregada.
• loop – Faz o loop do arquivo de áudio para que ele se repita continuamente.
• muted – Inicia a reprodução de áudio com o som mudo.
• preload – Especifica se o áudio deve ser pré-carregado ou não.

Contente

O elemento não tem nenhum requisito de conteúdo específico, mas é importante incluir pelo menos um elemento dentro do elemento para garantir a compatibilidade entre navegadores. Aqui está um exemplo:

1

2

   src="reel.mp3" type="audio/mpeg"> 

3

   src="reel.ogg" type="audio/ogg">

4

  Your browser does not support the audio element.

5

Este exemplo inclui dois formatos de arquivo de áudio diferentes, MP3 e Ogg Vorbis, com uma mensagem alternativa para navegadores que não suportam o elemento.

O conteúdo pode ser fornecido dentro do elemento de áudio, mas é destinado a navegadores mais antigos que não suportam o audio elemento.

Renderização e estilo do navegador

Atualmente, não há CSS padrão para estilizar os vários controles de interface do usuário no jogador.

Existem várias pseudoclasses, como :playing e :pausedque permitem estilizar de maneira muito limitada, dependendo do estado do jogador, mas o suporte é ruim.

Há também várias pseudoclasses que podem ser usadas com prefixos de navegador, mas, novamente, a adoção é questionável.

Veja como os principais navegadores processam o elemento por padrão: