📘 Aula 20: Colocando áudio no site 📘

Dica sobre direitos autorais!

Use sempre musicas filtradas sem direitos autoriais ou sem atribuição use ferramentas,
como o YouTube Studio Music com o filtro para Atribuição não necessária ou de outras fontes caso tenha.
Atenção: Tome sempre muito cuidado com direitos em forma de músicas.

Reproduzindo áudios: Exemplo 1

Vamos reproduzir áudio em HTML5.

O HTML5 trouxe a tag <audio>, que nos permite inserir sons e músicas em nossas páginas de forma simples,
sem depender de plugins externos como o Flash. A seguir, veremos duas formas de uso: a maneira simples e a maneira completa.

Primeira forma: simples mas limitada:

Estrutura usada acima

<audio src="midia/seu-audio.mp3" controls></audio>

Explicação dos elementos usados acima

<audio>→ é a tag responsável por carregar e tocar arquivos de áudio.
src="midia/seu-audio.mp3" → indica o caminho do arquivo de áudio que será reproduzido (no caso, um MP3 dentro da pasta midia).
controls → mostra os controles de reprodução do navegador (botão play, barra de progresso, volume).

Limitações

Aceita apenas um arquivo (se o navegador não suportar .mp3, o áudio não será reproduzido).
Não oferece alternativas se o áudio falhar.

Segunda forma: completa e mais flexível

Estrutura usada na forma acima


<audio preload="metadata" autoplay controls loop>
<source src="midia/audio-02.mp3" type="audio/mpeg">
<source src="midia/audio-02.ogg" type="audio/ogg">
<source src="midia/audio-02.wav" type="audio/wav">
<p>Infelizmente seu navegador não consegue reproduzir o áudio 
<a href="midia/audio-02.mp3"> Clique aqui para baixar o arquivo</a>
</p>
</audio>

ATENÇÃO: Sempre tenha o mesmo áudio nos 3 formatos, use ferramentas de conversão para melhor compatibilidade nos navegadores.

Explicação dos elementos usados

<audio> → o mesmo papel da forma simples, mas agora recebe atributos extras.
preload="metadata" → carrega apenas as informações do arquivo (como duração),
mas não baixa o áudio inteiro até que o usuário dê play (economiza dados).
controls → mostra os botões de controle.
loop → quando o áudio termina, ele começa novamente de forma infinita.

As fontes ( <source> )

Cada navegador suporta melhor determinados formatos de áudio. Para garantir compatibilidade, usamos várias opções:

<source src="midia/seu-audio.mp3" type="audio/mpeg">

→ formato MP3 com audio/mpeg no type, amplamente suportado.

```
<source src="midia/seu-audio.ogg" type="audio/ogg">
    
```
→ formato OGG com audio/ogg no type, comum em navegadores livres como Firefox.

```
<source src="midia/seu-audio.wav" type="audio/wav"> 
    
```
→ formato WAV com audio/wav no type, alta qualidade, mas arquivos pesados.

O navegador tentará reproduzir o primeiro formato que conseguir reconhecer.

Conteúdo alternativo (<p> ... </p>)

Se o navegador não suportar a tag <audio>, aparece a mensagem:
"Infelizmente seu navegador não consegue reproduzir o áudio."
E ainda há um link para download do arquivo MP3.

✅ Resumindo

Forma simples → mais rápida, mas arriscada (funciona apenas se o navegador suportar o formato).
Forma completa → mais profissional, garante compatibilidade e fornece alternativas ao usuário.