Áudio HTML : uma visão geral
Neste artigo, exploraremos detalhadamente o áudio HTML , incluindo os diferentes tipos de arquivos de áudio que podem ser incorporados usando HTML , as tags e os atributos usados para incorporar áudio e as melhores práticas para usar o áudio HTML em seu desenvolvimento web.
A tag <audio> em HTML e HTML5 permite que arquivos de áudio sejam incorporados em páginas da web. Para reproduzir o arquivo de áudio em determinados navegadores, ele é codificado usando codecs especiais, pois nem todos os formatos de áudio são suportados por todos os navegadores.
- Visão geral do áudio HTML:
- O que é áudio HTML?:
- Tags e atributos de áudio HTML:
- Tag HTML <audio>:
- Reprodução automática de áudio HTML:
- Loop de <áudio> HTML:
- Áudio HTML com etiqueta de incorporação:
- Compatibilidade do navegador:
- Extensões de áudio HTML:
- Áudio HTML – Tipos de mídia:
- Áudio HTML – Métodos | Propriedades | Eventos:
- Práticas recomendadas de áudio HTML:
O que é áudio HTML?
Áudio HTML é uma ferramenta poderosa para desenvolvedores da web, permitindo que eles incorporem arquivos de áudio diretamente em páginas da web.
Isso pode ser usado para fornecer música de fundo, efeitos sonoros ou até mesmo conteúdo falado.
O áudio HTML é compatível com a maioria dos navegadores da Web modernos e pode ser facilmente personalizado para atender às necessidades de diferentes aplicativos.
Áudio HTML suporta vários tipos de arquivos de áudio, incluindo:
| tipos | Visão geral |
| MP3 | MP3 é o formato de áudio mais usado na web. Ele fornece áudio de alta qualidade com tamanhos de arquivo relativamente pequenos. |
| WAV | WAV é um formato de áudio sem perdas que fornece áudio de alta qualidade com tamanhos de arquivo grandes. |
| Ogg | Ogg é um formato de áudio gratuito e de código aberto que fornece áudio de alta qualidade com tamanhos de arquivo relativamente pequenos. |
Tags e atributos de áudio HTML
O HTML fornece várias tags e atributos que permitem incorporar arquivos de áudio em páginas da web.
Aqui estão algumas das tags e atributos mais usados:
Tag HTML <audio>
A tag <audio> é usada para incorporar arquivos de áudio em páginas da web.
O atributo src é usado para especificar a URL do arquivo de áudio.
O atributo de controles é usado para exibir os controles de reprodução, como reproduzir, pausar e volume.
Abaixo está um exemplo de uso da tag <audio> em HTML para reproduzir um arquivo de áudio:
Example:
Reprodução Automática de Áudio HTML
O atributo autoplay é usado para iniciar automaticamente a reprodução do arquivo de áudio quando a página da web é carregada:
Example
IMPORTANTE: na maioria dos casos, o Chrome não oferece suporte à reprodução automática. No entanto, a reprodução automática silenciada é sempre permitida. Coloque mudo após a reprodução automática para fazer seu vídeo tocar sozinho (mas sem som):
Example
Loop de <áudio> HTML
Você pode usar o atributo loop na tag <audio> para criar um loop infinito para seu arquivo de áudio. Isso significa que o áudio será reproduzido continuamente, começando do início do arquivo até o final.
O atributo loop pode ser adicionado à tag <audio> da seguinte forma:
Example:
Áudio HTML com etiqueta de incorporação:
A tag <embed> permite incorporar conteúdo de áudio de fontes externas, como serviços de streaming ou arquivos de áudio hospedados em um servidor separado.
A tag <embed> é um método antigo de inserir áudio em uma página da web. No entanto, é relativamente ineficiente quando comparado com abordagens alternativas.
Para usar a tag <embed> , o usuário precisa de um plugin como MIDI ou QuickTime para compatibilidade.
Aqui está um exemplo de como usar a tag <embed> para incorporar um arquivo de áudio:
Example:
Compatibilidade do navegador:
Existe uma lista na tabela da primeira versão do navegador que acomoda formalmente o elemento <audio>.
| Elemento |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| <áudio> | 4.0 | 9,0 | 3.5 | 4.0 | 10.5 |
Extensões de áudio HTML:
Existem três formatos de áudio suportados: MP3, WAV e OGG. O suporte do navegador para os diferentes formatos é:
| Navegador | MP3 | WAV | OGG |
|---|---|---|---|
| Borda/IE | SIM | NÃO | NÃO |
| cromada | SIM | SIM | SIM |
| Raposa de fogo | SIM | SIM | SIM |
| Safári | SIM | SIM | NÃO |
| Ópera | SIM | SIM | SIM |
Áudio HTML – Tipos de mídia
| Formato de arquivo | Tipo de mídia |
|---|---|
| MP3 | áudio/mpeg |
| OGG | áudio/ogg |
| WAV | áudio/wav |
Áudio HTML – Métodos | Propriedades | Eventos:
O elemento <audio> do HTML DOM define suas propriedades, métodos e eventos.
O áudio pode ser carregado, reproduzido, pausado e pode ser modificado para duração e volume.
Além disso, você pode receber notificações quando o áudio começa a tocar, é pausado, etc.
Visite nossa referência de DOM de áudio/vídeo HTML para obter uma explicação completa do DOM. .
Práticas recomendadas de áudio HTML
Aqui estão algumas práticas recomendadas para usar o áudio HTML:
- Use formatos de arquivo apropriados para diferentes tipos de áudio. Por exemplo, use MP3 para música e fala e use WAV para áudio de alta qualidade.
- Otimize os arquivos de áudio para reduzir seu tamanho e melhorar o tempo de carregamento da página. Use ferramentas como o Audacity para reduzir o tamanho do arquivo de áudio sem sacrificar a qualidade.
- Forneça texto alternativo para conteúdo de áudio. O texto alternativo permite que os usuários que não podem ouvir o áudio entendam o que ele representa.
- Use a reprodução automática com moderação para conteúdo de áudio. A reprodução automática pode ser irritante para os usuários, especialmente se o áudio for alto ou perturbador.
- Certifique-se de que o conteúdo de áudio seja acessível a todos os usuários, incluindo aqueles com deficiência. Forneça transcrições ou legendas para conteúdo falado e garanta que o conteúdo de áudio possa ser acessado com leitores de tela.
- Teste o conteúdo de áudio em diferentes navegadores e dispositivos para garantir que funcione e seja exibido corretamente. Considere o uso de design responsivo para garantir que o conteúdo de áudio seja exibido corretamente em diferentes tamanhos de tela.
