Áudios no documento HTML

Como adicionar uma arquivo de áudio ao documento HTML?

Utilize o elemento <audio> para inserir áudios no documento HTML. Especifique o link do áudio no atributo src. Vejamos o exemplo a seguir:

<audio src="movie.mp3" width="320" height="240" controls></audio>

No exemplo acima, adicionamos o áudio movie.mp3 através do atributos src. Também configuramos para mostrar os controles de reprodução adicionando o atributo controls.

Você também pode especificar o arquivo do áudio através do elemento <source>.

<audio width="320" height="240" controls>
  <source src="movie.mp3" type="audio/mp3">
</audio>

Como alterar os estilos do controle de áudio?

Para estilizar o controle de áudio, você pode usar CSS. No entanto, a personalização dos controles de áudio padrão é limitada. Você pode esconder os controles padrão e criar seus próprios controles personalizados utilizando JavaScript e CSS. Veja um exemplo básico:

#meuControle {
  display: flex;
  gap: 10px;
}

#meuControle button {
  padding: 10px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#meuControle button:hover {
  background-color: #0056b3;
}

<audio id="meuAudio" src="movie.mp3"></audio>
<div id="meuControle">
  <button onclick="document.getElementById('meuAudio').play()">Play</button>
  <button onclick="document.getElementById('meuAudio').pause()">Pause</button>
</div>

No exemplo acima, escondemos os controles padrão do áudio e criamos nossos próprios botões de play e pause.

Principais atributos de <audio>:

Origem dos nomes dos atributos de <audio>: