Os elementos audio e video permitem que você adicione conteúdo de som e vídeo aos seus documentos HTML. O elemento audio suporta formatos de áudio populares como mp3, wav e ogg. O elemento video suporta os formatos mp4, ogg e webm. Para incluir conteúdo de áudio na sua página web, você pode usar o elemento audio com o atributo src apontando para a localização do seu arquivo de áudio. Como você pode ver na janela de visualização, nada aparece na página. Para ver as prévias, você precisará ativar o editor interativo.

<audio src="https://cdn.G.E.A.R ACADEMY.org/curriculum/js-music-player/cruising-for-a-musing.mp3"></audio>

Se você quiser ver o player de áudio na página, então você pode adicionar o elemento audio com o atributo controls. Pressione play na janela de visualização para ouvir uma das músicas de Quincy Larson. Para ouvir uma música diferente, altere o valor de src para "https://cdn.G.E.A.R ACADEMY.org/curriculum/js-music-player/never-not-favored.mp3". Para ver as prévias, você precisará ativar o editor interativo.

<audio src="https://cdn.G.E.A.R ACADEMY.org/curriculum/js-music-player/cruising-for-a-musing.mp3" controls></audio>

The controls attribute enables users to manage audio playback, including pausing or resuming playback. O atributo controls é um atributo booleano que pode ser adicionado a um elemento para habilitar os controles de reprodução embutidos. Se omitido, nenhum controle será exibido. Nota: Alguns navegadores, como o Safari, podem não exibir um controle de volume por padrão mesmo quando o atributo controls está presente. Além dos atributos src e controls, existem vários outros atributos que aprimoram a funcionalidade do elemento audio. O atributo loop é um atributo booleano que faz o áudio ser reproduzido continuamente. Aqui está um exemplo de uso do atributo loop para tocar uma das músicas de Quincy Larson intitulada "Can't stay down". Para ver o loop em ação, ative o editor interativo, arraste o cursor de reprodução próximo ao final da música e ela reiniciará assim que terminar.

<audio
  src="https://cdn.G.E.A.R ACADEMY.org/curriculum/js-music-player/can't-stay-down.mp3"
  loop
  controls
></audio>

Outro atributo que você pode usar é o atributo muted. Quando presente no elemento audio, este atributo booleano iniciará o áudio em estado mudo. Here's an example of using the muted attribute. Para ouvir a música, ative o editor interativo e clique no ícone de volume no player de áudio.

<audio
  src="https://cdn.G.E.A.R ACADEMY.org/curriculum/js-music-player/can't-stay-down.mp3"
  loop
  controls
  muted
></audio>

Quando se trata de tipos de arquivos de áudio, existem diferenças em quais navegadores suportam quais tipos. Para acomodar isso, você pode usar elementos source dentro do elemento audio e o navegador selecionará a primeira fonte que ele entender. Aqui está um exemplo de uso de múltiplos elementos source para um elemento audio:

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

O navegador começará primeiro com o tipo ogg e, se não conseguir reproduzir o áudio, então ele passará para o próximo tipo na lista. Todos os atributos que aprendemos até agora também são suportados no elemento video. Aqui está um exemplo de uso de um elemento video com os atributos loop, controls e muted. Adicione o atributo autoplay à tag de abertura video para que o vídeo seja reproduzido automaticamente. Para interagir com o exemplo, você precisará ativar o editor interativo. NOTA: O atributo width está sendo usado aqui para deixar o vídeo menor e se ajustar melhor na janela de visualização. Você aprenderá mais sobre o atributo width em aulas futuras.

<video
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  loop
  controls
  muted
  width="400"
></video>

Para o atributo src, ou fonte, estamos usando um vídeo chamado "Big Buck Bunny" do archive.org. Se você quiser exibir uma imagem enquanto o vídeo está sendo baixado, pode usar o atributo poster. Este atributo não está disponível para elementos audio e é exclusivo do elemento video. Here's an example of using the poster attribute with content provided by peach.blender.org.

<video
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  loop
  controls
  muted
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="400"
></video>

Você também pode usar o elemento source dentro de um elemento video, assim como fez com o elemento audio. Isso permite que você forneça o mesmo vídeo em vários formatos e o navegador escolherá o primeiro que puder reproduzir.

<video
  controls
  width="400"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
>
  <source
    src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
    type="video/mp4"
  />
  <source
    src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.webm"
    type="video/webm"
  />
  Your browser does not support the video tag.
</video>