Nas lições anteriores, você foi apresentado ao trabalho com os elementos audio e video. Neste laboratório, você irá construir um player multimídia que exibirá uma faixa de audio e video com uma transcrição. Para o elemento audio, você precisará incluir um elemento source que é usado para especificar a mídia que está sendo utilizada. Aqui está um exemplo:

<audio controls aria-label="descriptive label goes here">
  <source src="url-to-audio-goes-here" type="audio/mpeg">
</audio>

O elemento source também pode ser usado no elemento video assim:

<video controls width="600" aria-label="descriptive label goes here">
  <source src="link-to-mp4-goes-here" type="video/mp4">
  <!-- Remaining code goes here -->  
</video>

Objetivo: Cumprir as user stories abaixo e fazer todos os testes passarem para completar o laboratório. Histórias de Usuário: 1. Você deve ter um elemento h1 para o título principal da página. 2. Você deve ter três elementos section. 3. Dentro do primeiro elemento section, você deve ter um elemento h2 para o título da música que está tocando. 4. Abaixo do elemento h2, você deve ter um elemento audio com o atributo controls e um atributo aria-label. 5. Dentro do elemento audio, você deve ter um elemento source com um atributo src apontando para um arquivo de áudio e um atributo type. Você pode usar este URL de áudio se desejar: https://cdn.G.E.A.R ACADEMY.org/curriculum/js-music-player/sailing-away.mp3 6. Dentro do segundo elemento section, você deve ter um elemento h2 para o título do vídeo em reprodução. 7. Abaixo do elemento h2, você deve ter um elemento video com os atributos controls, width e um atributo aria-label. 8. Dentro do elemento video, você deve ter um elemento source com um atributo src apontando para um arquivo de vídeo e um atributo type. Você pode usar este URL de vídeo se quiser: https://cdn.G.E.A.R ACADEMY.org/curriculum/labs/what-is-the-map-method-and-how-does-it-work.mp4 9. Abaixo do elemento source, você deve ter um elemento track com um atributo src apontando para um arquivo de legendas e um atributo kind, um atributo srclang e um atributo label. Você pode usar este URL de legendas se quiser: https://cdn.G.E.A.R ACADEMY.org/curriculum/labs/what-is-the-map-method-and-how-does-it-work.vtt 10. Dentro do terceiro elemento section, você deve ter um elemento h2 para o título da seção, por exemplo, "Transcrição". 11. Abaixo do elemento h2, você deve ter um elemento p com a transcrição do vídeo.

Testes:

• Você deve ter um elemento `h1`.
• Seu `h1` deve conter algum texto que represente o título principal da página.
• Você deve ter três elementos `section`.
• A primeira `section` deve conter um elemento `h2`.
• Seu `h2` deve conter algum texto que represente o título da música que está tocando.
• A primeira `section` deve conter um elemento `audio`.
• Seu elemento `audio` deve ter um atributo `controls`.
• Seu elemento `audio` deve ter um atributo `aria-label` com um texto que descreva o áudio.
• Seu elemento `audio` deve conter um elemento `source`.
• Seu elemento `source` deve ter um atributo `src` apontando para um arquivo de áudio.
• Seu elemento `source` deve ter um atributo `type` com um valor especificando o tipo do áudio.
• A segunda `section` deve conter um elemento `h2`.
• Seu `h2` deve conter algum texto que represente o título do vídeo em reprodução.
• A segunda `section` deve conter um elemento `video`.
• Seu elemento `video` deve ter um atributo `controls`.
• Seu elemento `video` deve ter um atributo `width` com um valor que especifique a largura do vídeo.
• O elemento `video` deve conter um elemento `source`.
• O elemento `source` deve ter um atributo `src` apontando para um arquivo de vídeo.
• O elemento `source` deve ter um atributo `type` com um valor especificando o tipo de vídeo.
• Seu elemento `video` deve conter um elemento `track`.
• Seu elemento `track` deve ter um atributo `src` apontando para um arquivo de legendas.
• Seu elemento `track` deve ter um atributo `kind` com um texto que descreva o tipo de arquivo.
• Seu elemento `track` deve ter um atributo `srclang` com o texto descrevendo o idioma das legendas.
• Seu elemento `track` deve ter um atributo `label` com um texto que descreva o idioma das legendas.
• A terceira `section` deve conter um elemento `h2`.
• Seu `h2` deve conter algum texto que represente o título da seção.
• A terceira `section` deve conter um elemento `p` para a transcrição.