Carregando...

Html Audio

Postado: 27 de julho de 2022 Tempo de Leitura: < 1 Minuto

Html audio é um dos elementos HTML5 adicionados para permitir a incorporação de arquivos de áudio em uma página web. Como nem todos os navegadores suportam todos os formatos de áudio, o arquivo de áudio é codificado usando codecs especiais.

A tag <source> ou o atributo src é usado para indicar as variações de um mesmo arquivo de áudio. 

O caminho para um arquivo de áudio pode conter URLs absolutos ou relativos.

Sintaxe html audio

A tag <audio> vem em pares. O conteúdo é escrito entre as tags de abertura (<audio>) e de fechamento (</audio>).

Veja o exemplo da tag HTML <audio>:

    <audio controls>
      <source src="audios/audio.ogg" type="audio/ogg">
      <source src="audios/audio.mp3" type="audio/mpeg">
    </audio>

O atributo de loop

O uso do atributo loop fará com que o arquivo de áudio seja reproduzido repetidamente:

<audio src="audio.mp3" autoplay loop></audio>

Exibindo controles do navegador

Você pode deixar o navegador exibir ao usuário controles como volume ou reproduzir/pausar. Isso é feito com a ajuda do atributo de controles .

<audio src="audio.mp3" controls></audio>

Exemplo da tag HTML <audio> com o atributo controls:

<audio controls src="audios/audio.mp3">
      Your browser does not support the audio element.
</audio>

Vários formatos de arquivo

Com a tag <audio> você pode definir vários formatos do mesmo arquivo de áudio.

<audio controls>
  <source src="audios/audio.ogg">
  <source src="audios/audio.mp3">
</audio>

Atributos html audio

A tag <audio> possui atributos, que indicam o caminho para o arquivo de áudio, a forma como o arquivo de áudio deve ser reproduzido, etc. Aqui são utilizados os atributos controls , autoplay , loop e muted , e seus valores podem ser omitidos. Se o atributo for especificado, por padrão, essa função será considerada habilitada.

Configurações padrão de CSS

Nenhum.

Publicado por: Loop Nerd

705 Visualizações

Tags

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *